Horizontal Slideshow with Divs

Horizontal slideshow with DIVs

jQuery for the logic and CSS3 for transition and transform.

Multiple galleries + Auto-slide + Pause on hover:

$(function(){
  $('.gallery').each(function() {
    var $gal     = $(this),        $movable = $(".movable", $gal),         $slides  = $(">*", $movable),        N        = $slides.length,        C        = 0,        itv      = null;        function play() { itv = setInterval(anim, 3000); }    function stop() { clearInterval(itv); }    function anim() {      C = ($(this).is(".prev") ? --C : ++C) <0 ? N-1 : C%N;      $movable.css({transform: "translateX(-"+ (C*100) +"%)"});    }        $(".prev, .next", this).on("click", anim);    $gal.hover(stop, play);    play();
  });
});

.gallery{  position: relative;  overflow: hidden;}.gallery .movable{  display: flex;  height: 70vh;  transition: transform 0.4s;}.gallery .movable > div {  flex:1;  min-width:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Pause on hover and autoslide
<div class="gallery">  <div class="movable">    <div style="background:#0af">1 <p style="position:absolute; top:400px;">aaaa</p></div>    <div style="background:#af9">2</div>    <div style="background:#f0a">3</div>  </div>  <button class="prev">Prev</button>  <button class="next">Next</button></div>
As many galleries as you want

How display two div horizontally in my carousel?

I've added a Codepen which solves your problem, where you can inspect the changes I've made to your markup.

Flexbox is a display layout method, so I've replaced float:flex with display:flex. I've then added some further style rules, which result in a 2 column layout, each column being 50% of the flexbox container's width (as a width must be defined for this to work, I've set the width to 75vw, which equates to 75% of the browser screen width).

The markup for each 'slide' needs to be the same in order for the layout to work, so I've changed the style rule #slideshow to .mySlides and ensured that the image sits within a div tag, which I saw you had added to the first slide.

Here is the styling required (with some border colours set so you can see what is going on):

.mySlides{
    display: flex;
    flex-direction: row;
    width: 75vw;
    border: 1px solid red;
}
.mySlides > div {
    flex: 0 0 50%;
    border: 1px solid green;
}

flex: 0 0 50% is a shorthand, but in this case instructs each column to occupy a minimum of 50% width.

I've made some other minor amends, but these are mostly cosmetic.

I hope this is useful. Questions are welcome :-)

View Codepen

Building horizontal slider - divs floating vertically

If your support is IE10+ and are not concerned with Opera Mini, then you can use display: flex. That way you don't need any extra markup or even floats and clearfix.

Along with using flex you will also have to set a min-width on the slides that is equal to the container minus any margins and padding. In regards to margins and padding, the container will also have to accommodate any that are applied to the slides (I noticed you have a 5px margin on them).

HTML:

<div id="slidingWindow">
    <div class="slidingSection clearfix">Something something</div>
    <div class="slidingSection clearfix">Again something</div>
</div>

CSS:

#slidingWindow {
    overflow:hidden;
    width: 480px; /* width of slide + left and right margins */
    height: 500px;
    background-color: red;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}

.slidingSection {
    margin: 5px;
    background-color: green;
    width: 470px;
    min-width: 470px; /* required */
    height: 400px;
}

Below is a fork of your fiddle with the size reduced and having an animation on hover to show it is working properly:

#slidingWindow { overflow:hidden;    width: 260px;    height: 300px;    background-color: red;    display: -ms-flex;    display: -webkit-flex;    display: flex;}
.slidingSection {    margin: 5px;    background-color: green; width: 250px;    min-width: 250px; height: 200px;    -webkit-transition: -webkit-transform 750ms; transition: transform 750ms;}
#slidingWindow:hover > .slidingSection {    -webkit-transform: -webkit-translate3d(-260px, 0, 0);    transform: translate3d(-260px, 0, 0);    -webkit-transition: -webkit-transform 750ms;    transition: transform 750ms;}

<div id="slidingWindow">    <div class="slidingSection">Something something</div>    <div class="slidingSection">Again something</div></div>

How can I make a div horizontally slide in?

Based on the example you give, here's it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/

EDIT 2017

Too much jQuery

You're right, here's a CSS alternative

.left-right {    overflow:hidden;    height:200px;    width:200px;    position:relative;    background-color:#333;}.slider {    width:200px;    height:200px;    position:absolute;    top:0;    right:-200px;    background-color:#000;    color:#fff;    transition:0.4s ease;}
.left-right:hover .slider {  right:0;}

<div class="left-right">  <div class="slider">Welcome !</div></div>

Creating horizontal list of auto sliding divs

Stackoverflow usually works that you post what you have tried and tell us what the problem is and we fix it for you, it's not meant for us to do the whole thing from the ground up. Anyway, since you're a beginner I don't want you to give up, so I built what I think you want:

http://jsfiddle.net/u5dn0mp5/

var time = 2000;//millisecondsvar index = 0;var container = $("#container");var childrenCount = $(".section").length;function slideToNext() {
    index = (index + 1) % childrenCount;    console.log(index);    container.css({        marginLeft: -1 * index * 100 + "%"    })}var pt = window.setInterval(function() {    slideToNext();}, time)

html, body {margin: 0;padding: 0;overflow-x: hidden;}
#container {    width: 300%;    overflow: hidden;    -webkit-transition: margin-left 500ms ease-in-out;        -moz-transition: margin-left 500ms ease-in-out;        -o-transition: margin-left 500ms ease-in-out;        -ms-transition: margin-left 500ms ease-in-out;        transition: margin-left 500ms ease-in-out;}
.section {    width: 33.3333%;    float: left;    height: 200px;}
#section_blue {background: blue;}#section_red {background: red;}#section_green {background: green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="container">
    <div class="section" id="section_blue"></div>    <div class="section" id="section_red"></div>    <div class="section" id="section_green"></div>
  </div>

Sliding divs horizontally with JQuery

Unfortunately there is no ready made 'horizontal' slide animation with jQuery. Unless you go with bigger packages like jQuery UI. But I don't think that is needed.

The only thing you want is some creative use of the animate() function in jQuery to achieve an effect.

I didn't know which one you'd want to go with since the description was vague so I made 2 examples for minor effects in panel switching:

http://jsfiddle.net/sg3s/rs2QK/ - This one slides panel open from the left and to close to the right

http://jsfiddle.net/sg3s/RZpbK/ - Panels slide open from left to right and close to the left befor opening the new one.

Resources:

• http://api.jquery.com/animate/

You can't do this with pure CSS, not yet anyways. The support for transitions is basic and limited to pretty much only webkit based browsers. So since you're going to need jQuery make smart use of it, but you still need to make sure you style as much as possible with css before you use the JS. Note that I don't use any visual styling / manipulations in my JS.

---

Related Topics