WordPress как на ладони
wordpress jino

Slider

<ul class="slides">
	<li><img class="img-responsive" src="http://neookna.loc/wp-content/uploads/2017/06/neookna.png" alt="" />
<div class="container">

Не могу понять принцип построения списка, в данном случае слайдера. Смущает style. Как его реализовать на PHP?

0
Гость 4 месяца назад
  • 1

    Это - бутстраповая карусель?

    Если да, то я ее реализовал вот так:

        <div class="col-md-9">
    			<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    		<!-- Indicators -->
    		<ol class="carousel-indicators">
    			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    			<li data-target="#myCarousel" data-slide-to="1"></li>
    			<li data-target="#myCarousel" data-slide-to="2"></li>
    		</ol>
    
    		<!-- Wrapper for slides -->
    		<div class="carousel-inner">
    
    		<?php
    		$i = 0;
    		$query = new WP_Query('category_name=featured');
    
    // here starts the LOOP
    if ( $query->have_posts() ) {
    	while ( $query->have_posts() ) {
    		$query->the_post(); 
    			if ( $i == 0 ) { 
    		echo '<div class="item active">';
    	}else{
    		echo '<div class="item ">';
    	}
    	$i++;
    	?>
    	<?php echo kama_thumb_img('w=907 &h=360 &alt='. get_the_title() ); ?> 
    
    			<div class="carousel-caption">
    			  <h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="nofollow"><?php the_title(); ?></a></h3>
    			  <?php the_excerpt(); ?>
    			</div>
    		  </div>
    
    	<?
    	}
    } else {
    	// Nothing to get here
    }
    
    wp_reset_postdata();
    ?>
    
    		</div>
    
    		<!-- Left and right controls --> 
    		<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
    	</div>

    Дал в пределах контейнера.
    Была сложность с размером картинок, так что пришлось воспользоваться плагином (см. предыдущую тему).

    Суть такова: первый слайд должен идти с стилем item active, остальные - item . Так что пришлось вводить счетчик.
    В остальном - обычный цикл

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Регистрация. Вход.