Carousel Using Jquery

carousel using jQuery

Here you go an infinite. Could be done with less code for sure.
http://jsfiddle.net/artuc/rGLsG/3/

HTML:

<a href="javascript:void(0);" class="btnPrevious">Previous</a>
<a href="javascript:void(0);" class="btnNext">Next</a>
<div class="carousel">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
    </ul>
</div>

CSS:

.carousel{
        padding-top: 20px;
        width: 357px;
        overflow: hidden;
        height: 50px;
        position: relative;
    }.carousel ul{
        position: relative;
        list-style: none;
        list-style-type: none;
        margin: 0;
        height: 50px;
        padding: 0;
    }.carousel ul li{
        position: absolute;
        height: 25px;
        width: 50px;
        float: left;
        margin-right: 1px;
        background: #f2f2f2;
        text-align: center;
        padding-top: 25px;
    }

JS:

$(function(){
        var carousel = $('.carousel ul');
        var carouselChild = carousel.find('li');
        var clickCount = 0;
        var canClick = true;

        itemWidth = carousel.find('li:first').width()+1; //Including margin

        //Set Carousel width so it won't wrap
        carousel.width(itemWidth*carouselChild.length);

        //Place the child elements to their original locations.
        refreshChildPosition();

        //Set the event handlers for buttons.
        $('.btnNext').click(function(){
            if(canClick){
                canClick = false;
                clickCount++;

                //Animate the slider to left as item width 
                carousel.stop(false, true).animate({
                    left : '-='+itemWidth
                },300, function(){
                    //Find the first item and append it as the last item.
                    lastItem = carousel.find('li:first');
                    lastItem.remove().appendTo(carousel);
                    lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth));
                    canClick = true;
                });
            }
        });

        $('.btnPrevious').click(function(){
            if(canClick){
                canClick = false;
                clickCount--;
                //Find the first item and append it as the last item.
                lastItem = carousel.find('li:last');
                lastItem.remove().prependTo(carousel);

                lastItem.css('left', itemWidth*clickCount);             
                //Animate the slider to right as item width 
                carousel.finish(true).animate({
                    left: '+='+itemWidth
                },300, function(){
                    canClick = true;
                });
            }
        });

        function refreshChildPosition(){
            carouselChild.each(function(){
                $(this).css('left', itemWidth*carouselChild.index($(this)));
            });
        }
    });

Create a simple infinite carousel using jQuery

Here is the working demo in JsFiddle

$(document).ready(function(){  var scrolled = 0,   scrollDistance = 210, // Scrolling at at time    maxToScroll, // Maximum to scroll left  el; // Target element      // Get target element reference  el = $('.nav-products-carousel');    // calculate maximum to scroll  // this helps to make last element to appear correctly  maxToScroll = el.width() + scrollDistance;
  $(document).on('click', function() {      if ( scrolled < maxToScroll ){        scrolled = scrolled + scrollDistance;        el.stop().animate({            scrollLeft: scrolled        });      }      else{        el.stop().animate({            scrollLeft: 0        });
        // Reset scrolled flag        scrolled=0;      }  });  });
div.nav-products-carousel {        width: 100%;        white-space: nowrap;        overflow-x: hidden;        background: rgb(201, 201, 116);    }
    div.nav-item {        display: inline-block;        width: 200px;        white-space: initial;        text-align: center;        padding: 5px;    }    .scroll-right {        right: 0px;        cursor: pointer;        position: absolute;        background: #ccc;        padding-top: 5%;        height: 100%;        width: 100px;        background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));        background: -o-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));        background: -moz-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));        background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="container">    <div class="nav-products-carousel">        <div class="nav-item text-center">            <a href="/mattresses/">                <center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>                <p v-html="product.properties.Title">1</p>            </a>        </div>        <div class="nav-item text-center">            <a href="/mattresses/">                <center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>                <p v-html="product.properties.Title">2</p>            </a>        </div>        <div class="nav-item text-center">            <a href="/mattresses/">                <center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>                <p v-html="product.properties.Title">3</p>            </a>        </div>        <div class="nav-item text-center">            <a href="/mattresses/">                <center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>                <p v-html="product.properties.Title">4</p>            </a>        </div>        <div class="nav-item text-center">            <a href="/mattresses/">                <center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>                <p v-html="product.properties.Title">5</p>            </a>        </div>        <div class="nav-item text-center">            <a href="/mattresses/">                <center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>                <p v-html="product.properties.Title">6</p>            </a>        </div>        <div class="nav-item text-center">            <a href="/mattresses/">                <center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>                <p v-html="product.properties.Title">8</p>            </a>        </div>        <div class="nav-item text-center">            <a href="/mattresses/">                <center><img class="img-fluid" src="http://via.placeholder.com/100x100" /></center>                <p v-html="product.properties.Title">9</p>            </a>        </div>        <span class="scroll-right text-white">            <i class="fa fa-angle-right fa-3x"></i>        </span>    </div></div>

jQuery Carousel with image in feature

Yes, I agree that using Slick in "center mode" is the correct approach.
It looks like the next thing you'll want to customize is the "center" image.
Create a new CSS rule that targets ".slick-center" and use transform:scale to increase the size of the centered image. You may also need to create a CSS rule for ".slick-list" and declare overflow:visible so that the newly scaled image is not cropped by the outer container.
The next thing you'll want to customize is the location of the arrows. You'll want to use absolute positioning to place them above the carousel. The class names of the arrows are usually ".slick-prev and .slick-next". I'd suggest adding a parent container outside of the carousel and set it to relative positioning. Then play with the left, right, top, bottom values to place it where you want it.
Good luck!

Getting current dynamic carousel detail using jquery

t worked like this for me!

$('#carouselExampleControls').bind('slid.bs.carousel', function (e) {
    let business_id = $(this).find('.active').find('.public_clinic_post').data('business');
    $('[name="business_id"]').val(business_id);
});

How to control carousel using jQuery in typescript?

I've managed to solve the problem by adding 

jQuery.noConflict();

before starting the jQuery code. Thanks for the help

How to write bootstrap carousel elements using jquery?

You need carousel indicators added to your carousel

(function(window, $, undefined) {
 var conf = {  center: true,  backgroundControl: false };
 var cache = {  $carouselContainer: $('.thumbnails-carousel').parent(),  $thumbnailsLi: $('.thumbnails-carousel li'),  $controls: $('.thumbnails-carousel').parent().find('.carousel-control') };
 function init() {  cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');  cache.$thumbnailsLi.first().addClass('active-thumbnail');
  if(!conf.backgroundControl) {   cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');  }  else {   cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());  }
  if(conf.center) {   cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");  } }
 function refreshOpacities(domEl) {  cache.$thumbnailsLi.removeClass('active-thumbnail');  cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail'); } 
 function bindUiActions() {  cache.$carouselContainer.on('slide.bs.carousel', function(e) {     refreshOpacities(e.relatedTarget);  });
  cache.$thumbnailsLi.click(function(){   cache.$carouselContainer.carousel($(this).index());  }); }
 $.fn.thumbnailsCarousel = function(options) {  conf = $.extend(conf, options);
  init();  bindUiActions();
  return this; }
})(window, jQuery);
$('.thumbnails-carousel').thumbnailsCarousel();

// here's what i added
 $('img').wrap('<div class="img-responsive"></div>');

 $('.img-responsive').wrap('<div class="item"></div>');

 $('.item').wrapAll('<div class="carousel-inner"></div>');

 $('.carousel-inner').wrapAll('<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"></div>');

$('.carousel-inner').after(' <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>');
var numItems = $('.img-responsive').length;var counter =0;
var $indicators = $('<ol/>', {  'class': 'carousel-indicators'}).appendTo('#carousel-example-generic');for (i = counter; i < numItems; i++) {  var indClass = '';  if(i == 0) {    indClass = 'active'  } $('<li/>', {    'data-target': '#carousel-example-generic',    'data-slide-to': i,    'class': indClass  }).appendTo($indicators);}

 $('.item:first').addClass('active srle');
body {  padding: 10px;  text-align: center;}#carousel-example-generic {  display: inline-block;}/*****************************/
/* Plugin styles */ul.thumbnails-carousel { padding: 5px 0 0 0; margin: 0; list-style-type: none; text-align: center;}ul.thumbnails-carousel .center { display: inline-block;}ul.thumbnails-carousel li { margin-right: 5px; float: left; cursor: pointer;}.controls-background-reset { background: none !important;}.active-thumbnail { opacity: 0.4;}.indicators-fix { bottom: 70px;}
<meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>      <img src="https://s28.postimg.org/4237b0cjh/image.jpg" >       <img src="https://s29.postimg.org/xaf064313/image.jpg" >       <img src="https://s17.postimg.org/sv1x15jlb/image.jpg" >

dynamic carousel slider jquery .append

This works for me as is. But you can try this setTimeOut.

        $(document).ready(function () {

     setTimeout(function(){
        $.get("myImagesURL")
        .done(function (response) {
          $(response.DataObject).each(function (i, item) {
              $('#myCarousel').append($('<div class="item"><img src="' + item.AbsolutePathImage + '" alt="image description" width="100%" height="250" /><div class="carousel-caption"></div></div>'));
          });
        });

    }, 3000);

    });

Bootstrap 4 Dynamic Carousel using Jquery

Looks like you need to have a class on the item 'carousel-item' not 'item'.

https://jsfiddle.net/orb9945u/

$(document).ready(function(){
    for(let j = 0; j < 5; j++) {
        $('<div class="carousel-item"><img 
          src="https://loremflickr.com/320/240" width="50%">   
          </div>').appendTo('.carousel-inner');
        $('<li data-target="#carousel" data-slide-to="'+j+'"> 
          </li>').appendTo('.carousel-indicators')

    }

    $('.carousel-item').first().addClass('active');
    $('.carousel-indicators > li').first().addClass('active');
    $('#carousel').carousel();
});

Related Topics

Use JavaScript in Order to Set the Current Percentage of a CSS Animation

Jquery Click Event Only Working After Moving the Mouse in Chrome

Expand Div Over Others on Mouse Over Jquery

Fixed Positioned Element Flicker in Ie Only, How to Solve

Detecting Load of <Link> Resources

Style Autofill or Autocomplete Default Browser Dropdown

Why Are Initial CSS Styles Not Visible on Dom Element.Style Field

Audio on Scroll

Disable Double Tap Zoom/Resize on Safari iOS12***

Jquery UI Datepicker: Don't Highlight Today When It Is Also Selected

Centering Textarea Placeholder Text in Safari

Animate CSS3 Gradient-Positions Using Jquery

How to Check If CSS Calc() Is Available Using JavaScript

Css3 Transition Polyfill

Get Actual Value Specified in CSS Using Jquery

How to Achieve Fixed Position Background Scroll/Reveal Effect? Jquery Plugin Available

Css3 Zooming on Mouse Cursor

Creating a Custom Attribute with Angularjs


Leave a reply



Submit