jQuery：コンテンツを右から左にスライドさせますか？

Question

jqueryを使用して簡単なコンテンツスライドショーを作成しようとしています。

私は自分のコードを実行すると、私は全く滑りませんが、同時に私のコードがうまくいかない理由を示すエラーは表示されません！

これは作業FIDDLE

であり、これは私のコードです：

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

誰かがこの問題について助言してもらえますか？事前に

おかげ

EDIT

私は今の要素を通過することができますが、彼らは本当にスライディングされていません！ここ

は別の作業FIDDLE

Answer 1

はこのような何かを試してみてくださいです。ここでの鍵は、position:relativeを親のdivに追加し、スライドを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>