Gewusst wie: anpassen, owl carousel, slider

Habe ich die Eule Karussell 2 (das neueste update) auf mein Thema. Ich habe das Karussell erfolgreich. Ich habe jedoch keine Kontrolle über die Anpassung. Ich habe versucht, die Bearbeitung der owl-carousel.js Datei und ich habe versucht, meine Bearbeitung owl.carousel-init.js die Datei, aber keiner von Ihnen geben Sie mir die Anpassungen, die ich möchte. Das wichtigste ist, dass, ich will nur 5 owl-Elemente, und es sind derzeit 8. Habe ich Hinzugefügt, alle die richtigen Dateien? Dies ist das erste Thema, das ich Baue, also bin ich nicht 100% zuversichtlich, dass ich alles richtig gemacht. Kann mir jemand helfen, vor Ort die Fehler, die ich gemacht, und mir helfen, es anzupassen? Vielen Dank im Voraus.

Ich meine carousel.php Datei zeigen die jüngsten populären Beiträge*

front-page.php

HTML:

<?php 
/* 
* Template Name: 
*/ 

get_header(); 
get_template_part ('inc/carousel'); 

$the_query = new WP_Query( [ 
'posts_per_page' => 14, 
'paged' => get_query_var('paged', 1) 
] ); 

if ( $the_query->have_posts() ) { ?> 
<div id="ajax"> 
<?php 
$i = 0; 
$j = 0; 
while ( $the_query->have_posts() ) { $the_query->the_post(); 

if ( $i % 7 === 0 ) { //Large post: on the first iteration and every 7th post after... ?> 
<div class="row"> 
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>> 
<div class="large-front-container"> 
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?> 
</div> 
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
<div class="front-page-post-info"> 
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
<?php get_template_part( 'front-shop-the-post' ); ?> 
<?php get_template_part( 'share-buttons' ); ?> 
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
</div> 
</article> 
</div> 

<?php 

} else { //Small posts ?> 
<?php if($j % 3 === 0) echo '<div class="row">'; ?> 
<article <?php post_class( 'col-md-4' ); ?>> 
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> 
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
<div class="front-page-post-info"> 
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
<?php get_template_part( 'front-shop-the-post' ); ?> 
<?php get_template_part( 'share-buttons' ); ?> 
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
</div> 
</article> 

<?php $j++; if($j % 3 === 0) echo '</div>'; ?> 
<?php 
} 
$i++; 
}?> 

</div> 
<?php if(get_query_var('paged') < $the_query->max_num_pages) { 
load_more_button(); 
} 
} 
elseif (!get_query_var('paged') || get_query_var('paged') == '1') { 
echo '<p>Sorry, no posts matched your criteria.</p>'; 
} 
wp_reset_postdata(); 
get_footer();

carousel.php

HTML:

<div class="owl-carousel"> 
<?php 
$carousel_cat = get_theme_mod('carousel_setting','1'); 
$carousel_count = get_theme_mod('count_setting','4'); 
$month = date('m'); 
$year = date('Y'); 
$new_query = new WP_Query( array('posts_per_page' => $carousel_count, 'meta_key' => 'wpb_post_views_count', 'orderby' => 'meta_value_num', 'order' => 'DESC','monthnum'=>$month,'year'=>$year )); 
?> 
<?php if ( $new_query->have_posts() ) : ?> 
<?php while ( $new_query->have_posts() ) : $new_query->the_post(); ?> 
<div class="item"> 
    <?php the_post_thumbnail('popular-posts'); ?>
    <h2><a class="popular-category" 
        <?php 
        $categories = get_the_category(); 
        $separator = ", ";
        $output = '';
        
        if ($categories) {
            foreach ($categories as $category) {
                $output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator;
            }
            echo trim($output, $separator);
        }
        
        ?></a></h2>
 <p>
     <a class="popular-excerpt" href="<?php the_permalink(); ?>"><?php echo get_the_excerpt(); ?></a>
                </p>
</div> 
<?php endwhile; wp_reset_postdata(); ?> 
<?php else : ?> 
<p><?php _e( 'Sorry, No Popular Posts Found ' ); ?></p> 
<?php endif; ?> 
</div>

owl.carousel-init.js

HTML:

$(document).ready(function() {

  $(".owl-carousel").owlCarousel({

      autoPlay: 3000, //Set AutoPlay to 3 seconds

      items : 4,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]

  });

});

functions.php

HTML:

unction templatename_add_owlcarousel() {
wp_enqueue_script ( 'jquery' );
wp_enqueue_script( 'owl-carousel-init', get_template_directory_uri() . '/js/owl.carousel-init.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'owl-carousel', get_template_directory_uri() . '/js/owl.carousel.js', array( 'jquery' ), false, true );
wp_enqueue_style( 'owlcarousel-style-theme', get_template_directory_uri() . '/css/owl.theme.css' );
wp_enqueue_style( 'owlcarousel-style', get_template_directory_uri() . '/css/owl.carousel.css' );
}
add_action( 'wp_enqueue_scripts', 'templatename_add_owlcarousel' );

footer.php

HTML:

script src="<?php bloginfo('template_directory'); ?>/js/owl.carousel-init.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/owl.carousel.js"></script> 
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script> 

DATEIEN IV ‚ E HINZUGEFÜGT

css/owl.Karussell.css

css/owl.Thema.css

js/owl.carousel.js

InformationsquelleAutor user6738171 | 2017-06-14



One Reply
  1. 0

    owl.carousel-init.js

    $(document).ready(function() {
      $(".owl-carousel").owlCarousel({
        autoPlay: 3000, //Set AutoPlay to 3 seconds
        responsive:{
          0:{
          items:1,
          nav:true
          },
          600:{
          items:2,
          nav:false
          },
          1000:{
          items:4,
          nav:true,
          loop:false
          }
        }
      });
    });

    und in footer.php

    <script src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
    <script src="<?php bloginfo('template_directory'); ?>/js/owl.carousel.js"></script> 
    <script src="<?php bloginfo('template_directory'); ?>/js/owl.carousel-init.js"></script>

    hoffe, das hilft..

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.