Support

Account

Register Login

Home › Forums › Add-ons › Gallery Field › Gallery + BS Carousel + Show 4, Slide 1

Solving

Gallery + BS Carousel + Show 4, Slide 1

  • I am trying to combine the ACF gallery with Bootstrap Carousel but modify it to show 4 images at a time and slide 1 across.

    I have it showing 4 columns, however there is only 6 images in this gallery and the output has 6 slides with 4 images in each which is what is causing the issue.

    I’m stumped!

    Your help is much appreciated 🙂

    My template code:

    <?php if( get_field('place_gallery') ): ?>
	<div class="place-gallery">	
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
		<?php 
		$images = get_field('place_gallery');
		$count=0;
		$count1=0;
		
		if($images) : ?>
		
		<!-- Indicators -->
    <ol class="carousel-indicators">
     	<?php foreach( $images as $image ): ?>
      	<li data-target="#carousel" data-slide-to="<?php echo $count; ?>" <?php if($count==0) : ?>class="active"<?php endif; ?>></li>      
      <?php 
	      $count++;
        endforeach; 
      ?>
    </ol>
						
		<!-- Wrapper for slides -->
		<div class="carousel-inner" role="listbox">
			<?php foreach( $images as $image ): ?>
      	<div class="item<?php if($count1==0) : echo ' active'; endif; ?>">
	      	<div class="place-gallery-image">
				  	<a href="<?php echo $image['url']; ?>"  data-lightbox="place-gallery-images">
				    	<img src="<?php echo $image['sizes']['place-gallery-image']; ?>" alt="<?php echo $image['alt']; ?>" />
				    </a>
				  </div>
				</div>
			<?php 
        $count1++;        
        endforeach; 
      ?> 
		
	</div>
	
	<!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  
</div>			        
<?php endif; ?>

</div>
<?php endif; ?>

    The Bootstrap Carousel code adapted from http://www.bootply.com/94452

    <script type="text/javascript">

jQuery('#carousel-example-generic').carousel({
  interval: 10000
})

jQuery('.carousel .item').each(function(){
  var next = jQuery(this).next();
  if (!next.length) {
    next = jQuery(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo(jQuery(this));
  
  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
    	next = jQuery(this).siblings(':first');
  	}
    
    next.children(':first-child').clone().appendTo(jQuery(this));
  }
});

</script>

    The CSS I have is:

    .carousel-inner .active.left  { left: -25% !important;             }
.carousel-inner .active.right { left: 25%!important;              }
.carousel-inner .next         { left: 25% !important;              }
.carousel-inner .prev         { left: -25%  !important;            }

    And finally this is what is outputting on my page, hence the issues…

    <div class="carousel-inner" role="listbox">
  <div class="item">
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-4.png"><img alt="" src=
      "/uploads/2016/04/800x600-4-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-2.png"><img alt="" src=
      "/uploads/2016/04/800x600-2-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-1.png"><img alt="" src=
      "/uploads/2016/04/800x600-1-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-6.png"><img alt="" src=
      "/uploads/2016/04/800x600-6-768x484.png"></a>
    </div>
  </div>
  <div class="item">
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-2.png"><img alt="" src=
      "/uploads/2016/04/800x600-2-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-1.png"><img alt="" src=
      "/uploads/2016/04/800x600-1-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-6.png"><img alt="" src=
      "/uploads/2016/04/800x600-6-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-3.png"><img alt="" src=
      "/uploads/2016/04/800x600-3-768x484.png"></a>
    </div>
  </div>
  <div class="item">
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-1.png"><img alt="" src=
      "/uploads/2016/04/800x600-1-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-6.png"><img alt="" src=
      "/uploads/2016/04/800x600-6-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-3.png"><img alt="" src=
      "/uploads/2016/04/800x600-3-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-5.png"><img alt="" src=
      "/uploads/2016/04/800x600-5-768x484.png"></a>
    </div>
  </div>
  <div class="item active">
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-6.png"><img alt="" src=
      "/uploads/2016/04/800x600-6-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-3.png"><img alt="" src=
      "/uploads/2016/04/800x600-3-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-5.png"><img alt="" src=
      "/uploads/2016/04/800x600-5-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-4.png"><img alt="" src=
      "/uploads/2016/04/800x600-4-768x484.png"></a>
    </div>
  </div>
  <div class="item">
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-3.png"><img alt="" src=
      "/uploads/2016/04/800x600-3-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-5.png"><img alt="" src=
      "/uploads/2016/04/800x600-5-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-4.png"><img alt="" src=
      "/uploads/2016/04/800x600-4-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-2.png"><img alt="" src=
      "/uploads/2016/04/800x600-2-768x484.png"></a>
    </div>
  </div>
  <div class="item">
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-5.png"><img alt="" src=
      "/uploads/2016/04/800x600-5-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-4.png"><img alt="" src=
      "/uploads/2016/04/800x600-4-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-2.png"><img alt="" src=
      "/uploads/2016/04/800x600-2-768x484.png"></a>
    </div>
    <div class="place-gallery-image">
      <a data-lightbox="place-gallery-images" href=
      "/uploads/2016/04/800x600-1.png"><img alt="" src=
      "/uploads/2016/04/800x600-1-768x484.png"></a>
    </div>
  </div>
</div>

  • Hi @advancednoob

    I’ve just tested your slider code, and it was working as it should be. Maybe there’s something wrong with your Javascript code. Could you please try to remove the script and see if the PHP code prints the right HTML?

    If it’s, could you please ask the script author about this issue?

    Thanks!

  • Hi @James,

    Thanks for your reply, yes you are correct when I remove the JS it outputs the right HTML however it then only displays 1 image.

    With the JS it shows 4 images which is what I want however instead of sliding across just 1 image, it slides the whole panel of 4 across.

    Is that making sense? Let me know if you need more clarity.

    Thanks for your time James.

  • Regarding the script author, his script works a treat it’s combining it with ACF where I am having the issue, not an issue with ACF itself but would love to get both dancing together in step.

  • Hi @advancednoob

    Could you please try to make the PHP code generates the exact HTML structure (including the classes and ids) like in the example (http://www.bootply.com/94452)?

    Looking at the script, I believe it copies the elements to create the required HTML. I think the best thing to do is asking the script author or jQuery community about this issue as they know more about jQuery. I’m sorry for the inconvenience.

    Thanks 🙂

  • All good James, thanks for taking a look.

    It might be easier to just go with a script like owl carousel that works out of the box in this manner, I just wanted to minimise bringing in extra scripts.

    Cheers.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Gallery + BS Carousel + Show 4, Slide 1’ is closed to new replies.