Carousel with touch screen interaction

Asked

Viewed 1,001 times

3

I have a Carousel that navigation is through the right/left arrows. In mobile, the user must be able to "drag" the Carousel, without using arrows to navigate.

I’m wearing the bootstrap cap. I need some framework to get the desired result? 

<div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
            <div class="item active">
               <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor </p>

           </div>
        </div>
       <a class="carousel-control left" href="#myCarousel" data-slide="prev"><<</a>
          <a class="carousel-control right" href="#myCarousel" data-slide="next">>></a>
    </div>
javascript html5 css3 touch
  • 1

    Yes accurate, at least Javascript. Take a look here on the site, there are many questions about sliders and you can notice more about how it works.

1 answer

2


I recommend using a plugin already ready, as in the case, the Owl Carousel

Example:

HTML:

<div id="owl-demo" class="owl-carousel owl-theme">

  <div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
  <div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
  <div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>

</div>

CSS:

#owl-demo .item img{
    display: block;
    width: 100%;
    height: auto;
}

JS:

$(document).ready(function() {

  $("#owl-demo").owlCarousel({

      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true

      // "singleItem:true" is a shortcut for:
      // items : 1, 
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false

  });

});

In addition, of course, to the files provided on the page.

Browser other questions tagged javascript html5 css3 touch

You are not signed in. Login or sign up in order to post.