jQuery: Inhalt von rechts nach links schieben?

Question

Ich versuche, eine einfache Content-Diashow mit jQuery zu erstellen.

Wenn ich meinen Code laufen lasse, bekomme ich überhaupt kein Gleiten, aber gleichzeitig bekomme ich keine Fehler, um anzuzeigen, warum mein Code nicht funktioniert!

Dies ist ein Arbeits FIDDLE

Und dies ist mein 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 

Könnte jemand bitte zu diesem Thema beraten?

Vielen Dank im Voraus

EDIT

ich kann jetzt durch die Elemente gehen, aber sie sind nicht wirklich Schiebe !!

hier ist ein weiterer Arbeits FIDDLE

Answer 1

versuchen, etwas wie dieses. Der Schlüssel hier war, position:relative zu dem Elternteil div hinzuzufügen und die Dias position:absolute; zu machen.

$("#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>