Carousel with touch screen interaction

Navigation
2

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

I'm using the bootstrap's own carousel. Do I need a 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>
    
asked by anonymous 25.05.2015 / 18:54

1 answer

1

I suggest using a plugin already ready, as in this case, 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

  });

});

More of course, from the files provided on the page.

    
25.05.2015 / 19:26
Scheduled email sending with PHP Why the footer does not get hidden and messes the page