CODEWITHSUNDEEP
javascriptjquery
Jackson
Jackson

Reputation: 820

jQuery: slide in content from right to left?

I'm trying to create a simple content slideshow using jquery.

When i run my code, I get no sliding at all but at the same time I get no errors to indicate why my code doesn't work!

This is a working FIDDLE

And this is my code:

$(window).load (function() {
    var theImage = $('.some');
    var theWidth = theImage.width()
    //wrap into mother div
    $('#feedTxt').wrap('<div id="mother" />');
    //assign height width and overflow hidden to mother
    $('#mother').css({
        width: function() {
        return theWidth;
      },
        height: function() {
        return theImage.height();
      },
        position: 'relative',
        overflow: 'hidden'
    });
        //get total of image sizes and set as width for ul
    var totalWidth = theImage.length * theWidth;
    $('#feedTxt').css({
        width: function(){
        return totalWidth;
    }
    });
});//doc ready

Could someone please advise on this issue?

Thanks in advance

EDIT

i now can go through the elements but they are not sliding really!!

here is another working FIDDLE

Upvotes: 0

Views: 34

Answers (1)

tnschmidt
tnschmidt

Reputation: 1196

Try something like this. The key here was adding position:relative to the parent div and making the slides position:absolute;.

$("#feedTxt > div:gt(0)").hide();

setInterval(function() { 
  $('#feedTxt > div:first')
    .animate({width:'toggle'},350)
    .hide()
    .next()
    .animate({width:'toggle'},350)
    .end()
    .appendTo('#feedTxt');
},  3000);
#feedTxt {
    display: flex;
    overflow-x: scroll;
    height:450px;
    width:100%;
    position:relative;
}

.some {
    flex: 0 0 100%;
    height: 450px;
    position: absolute; 
    right: 0;
    top:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center" id="feedTxt">

    <div class="some">
        <h1>title 1</h1>
        <br>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>



    <div class="some">
        <h1>title 2</h1>
        <br>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>


    <div class="some">
        <h1>title 3</h1>
        <br>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>


    <div class="some">
        <h1>title 4</h1>
        <br>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>


</div>

Upvotes: 1

Related Questions