How to create a custom horizontal slider

Question

Everything I've researched wants me to use their styles, or layouts (so it seems). I just want to take my existing div, and slide through the divs already inside of it. I know I'm missing something simple or thinking about it too hard.

Here's the code I want to slide through.

<div class="slide_wrapper">
     <div class="slide">
         <h3>Heading1</h3>
         <div>"Lorem ipsum </div>
     </div>
     <div class="slide">
         <h3>Heading2</h3>
         <div>"Lorem ipsum 2</div>
     </div>
</div>

I want to slide through all the .slide classes inside the .slide_wrapper and maybe even have a subtle button or arrow to do it manually if wanted. A point in the right direction would be extremely helpful and appreciated. THANKS!

Answer 1

I created a simple demo. Hope this will be a good start for your gallery!

jsBin demo

with this bit of jQuery:

var galW = $('.slider_wrapper').outerWidth(true);
var slidesN = $('.slider_wrapper').find('.slide').length;
var c = 0;   // =  current slide

function animate(){ 
  var curr = c===-1 ? c=slidesN-1 : c=c%slidesN;
  $('.slider').stop().animate({left: -(galW*c) },1000);  
}

$('.btn').click(function(){
  var theclass = $(this).hasClass('btn_right') ? c++ : c--;
  animate();
});

---

EDIT

demo with auto-slide

If you want it to auto-slide just paste this between the animate() function and the $('.btn').click(function(){ :

var autoTime;
function autoSlide(){
  autoTime = setInterval(function(){
    $('.btn_right').click();
  },3000);
}
autoSlide();

$('.slide_gallery').on('mouseenter mouseleave',function( e ){
  var inOut = e.type==='mouseenter' ? clearInterval(autoTime) : autoSlide(); 
});

---

HTML:

<div class="slide_gallery">

  <div class="btn btn_left"></div>
  <div class="btn btn_right"></div>

  <div class="slider_wrapper">
    <div class="slider">
       <div class="slide">
           <h3>Heading1</h3>
           <div>"Lorem ipsum </div>
       </div>
       <div class="slide">
           <h3>Heading2</h3>
           <div>"Lorem ipsum 2</div>
       </div>
       <div class="slide">
           <h3>Heading3</h3>
           <div>"Lorem ipsum 3</div>
       </div>
       <div class="slide">
           <h3>Heading4</h3>
           <div>"Lorem ipsum 4</div>
       </div>
    </div>
  </div>

</div>

CSS:

  .slide_gallery{
    position:relative;
    margin:15px auto;
    width:500px;
    padding:0 50px; /* padding for arrows*/
    background:#fff;
  }
  .slider_wrapper{
    position:relative;
    width:500px;
    height:300px;
    background:#eee;
    overflow:hidden;
  }
  .slider{
    position:absolute;
    width:99999px;
    left:0;
  }
  .slide{
    position:relative;
    float:left;
    width:500px;
    height:300px;
  }
  .btn{
    cursor:pointer;
    position:absolute;
    width:50px;
    height:100%;
    background:url(https://i.sstatic.net/tuKVp.gif) no-repeat center center;
  }
  .btn_left{
    left:0px;
    /* remove this after you replace image*/
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
  }
  .btn_right{
    right:0px;
  }

Answer 2

Use the best slideshow plugin around jquery.cycle.