Monday, November 10, 2014

bootstrap carousel control

Recently I was working on bootstrap carousel . I was looking for something like 

  • I don't want cycle on the images as well as no back action on first page and no forward button on the last page
  • And don't want  to navigate to the next until i clicked the icon to navigate, As you know bootstrap create a  vertical section for scrolling. 

I did the following to achieve my requirement  


<div id="carousel-example-generic"  class="carousel slide" data-ride="carousel" data-interval="false">  <!-- data-interval="false"-->                     
<!-- Wrapper for slides -->
<div class="carousel-inner" >
<div class="item active">
</div>
<div class="item">
</div>
    </div>
<!-- Controls -->
<!-- style="width:1%" did the trick and enforce user to click on the icon to navigate -->
<a style="width:1%;"  class="left carousel-control" href="#carousel-example-generic1" role="button" data-slide="prev">
<!-- put any custom image you want -->
<img  height="47" width="47" />
</a>   
<a style="width:1%;" class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">
   <!-- put any custom image you want -->
<img   height="47" width="47" />
</a>
</div>
<!-- run the below script on load of your page and it will do the hiding and showing the navigation icon on the first and last page --> 
<script>
var checkitem = function() {
        var $this;
        $this = $("#carousel-example-generic");
        if ($("#carousel-example-generic .carousel-inner .item:first").hasClass("active")) {
            $this.children(".left").hide();
            $this.children(".right").show();
        } else if ($("#carousel-example-generic .carousel-inner .item:last").hasClass("active")) {
            $this.children(".right").hide();
            $this.children(".left").show();
        } else {
            $this.children(".carousel-control").show();
        }
    };
</script>

Happy coding :)

Tips on passing Salesforce AI Associate Certification

  🌟 Motivation to Pursue the Salesforce AI Associate Certification 🌟 The world of technology is in a state of perpetual evolution, and on...