how to Touch Carousel Content Scroller and Slider use jquery

Please log in or register to like posts.

Touch Carousel Content Scroller and Slider use jquery This Code is given bellow

1) html Content – :

<div class=”outer-div1″>
<h2>This is my sllider div</h2>
<div class=”common-blocks1″ id=”common-blocks1″>
        <!–blocks-starts–>
        <div class=”blocks1″>
            <div class=”block-img1″>
                <img src=”images/foxbox-home-page_version_27_03.gif” />
            </div>
            <div class=”block-content”>
                <h3>River Rafting</h3>
                <p>Get ready to ride nature’s rollercoaster in this once in a lifetime. White Water Rafting experience on the Kundalika River in Kolad.</p>
            </div>                
        </div><!–blocks-ends–>
        <!–blocks-starts–><div class=”blocks1″>
            <div class=”block-img1″>
                <img src=”images/foxbox-home-page_version_27_06.gif” />
            </div>
            <div class=”block-content”>
                <h3>Helicopter Tour Of Mumbai</h3>
                <p>Customized The concept of Joy Rides is here. South Mumbai Juhu , Bandra – Worli Sealink, Worli Sea Face, Mahalaxmi Temple and more.</p>
            </div>
        </div><!–blocks-ends–>
        <!–blocks-starts–><div class=”blocks1″>
            <div class=”block-img1″>
                <img src=”images/foxbox-home-page_version_27_08.gif” />
            </div>
            <div class=”block-content”>
                <h3>Scuba Diving</h3>
                <p>Discover a spectacular world, where sound and gravity seem to forget about you for a while.</p>
            </div>
        </div><!–blocks-ends–>
                            <!–blocks-starts–><div class=”blocks1″>
                                <div class=”block-img1″>
                                    <img src=”images/foxbox-home-page_version_27_03.gif” />
                                </div>
                                <div class=”block-content”>
                                    <h3>River Rafting</h3>
                                    <p>Get ready to ride nature’s rollercoaster in this once in a lifetime. White Water Rafting experience on the Kundalika River in Kolad.</p>
                                </div>
                            </div><!–blocks-ends–>
    </div><!–common-blocks-ends–>
   <button class=”next”>Next</button>
   <button class=”prev”>Previous</button>
 </div>

2) Css Code : –

<style type=”text/css”>
     
     .common-blocks{
    width:100%;
    width:1400px;
    overflow:hidden;
    height:auto;
    transition:all 0.5s;
    margin-left:0px;
}
.common-blocks h2{
    margin:0 0 10px 0;
    padding:0 0 10px 0;
    border-bottom:2px solid #ccc;
}
.blocks{
    width:300px;
    border:1px solid #ccc;
    display:inline-block;
    margin:5px 40px 20px 0;
    vertical-align:top;
    color:#454545;
    padding:0 0 5px 0;
    height:310px
}
.outer-div{
    width:1000px;
    overflow:hidden;
}
  .common-blocks1{
    width:100%;
    width:1400px;
    overflow:hidden;
    height:auto;
    transition:all 0.5s;
    margin-left:0px;
}
.common-blocks1 h2{
    margin:0 0 10px 0;
    padding:0 0 10px 0;
    border-bottom:2px solid #ccc;
}
.blocks1{
    width:300px;
    border:1px solid #ccc;
    display:inline-block;
    margin:5px 40px 20px 0;
    vertical-align:top;
    color:#454545;
    padding:0 0 5px 0;
    height:310px
}
.outer-div1{
    width:1000px;
    overflow:hidden;
}
 </style>


3) Javascript Code :-




 var registerEvents = function(){
$(“.next”).off(“click”).on(“click”,function(event){
    if($(this).hasClass(‘disable’))return;
    $(this).addClass(‘disable’);
    window.setTimeout(function(){
        $(event.target).removeClass(‘disable’);
    },510);
    var targetBlock = $(event.target).siblings(‘.common-blocks1’);
    var leftMargin = parseInt(targetBlock.css(“marginLeft”) || 0) ;
    var numberOfBlocks = targetBlock.children(“.blocks1”).length; 
    //    Total Number of blocks 
    var displayCount = 3;
    //Number of blocks displaying at a time
    if(leftMargin <= (numberOfBlocks-displayCount)*(-300)) 
     // -300 width   of    block in left direction
        return;
    targetBlock.css(“marginLeft”,parseInt(leftMargin – 300)+”px”)
});
$(“.prev”).off(“click”).on(“click”,function(event){
    if($(this).hasClass(‘disable’))return;
    $(this).addClass(‘disable’);
    window.setTimeout(function(){
        $(event.target).removeClass(‘disable’);
    },510);
    var targetBlock = $(event.target).siblings(‘.common-blocks1’);
    var leftMargin = parseInt(targetBlock.css(“marginLeft”) || 0) ;
    if(leftMargin == 0) 
        return;
    targetBlock.css(“marginLeft”,parseInt(leftMargin + 300)+”px”)
});
}();

Reactions

0
0
0
0
0
0
Already reacted for this post.

Reactions

Leave a Reply

Your email address will not be published. Required fields are marked *