divを表示するjquery slide

Question

jqueryを使用するボタンなしでdivを表示および非表示にすることができるテキストコンテンツを持つ複数のdivを作成したいとします。 （本のページをめくるような）。たとえば、次の章や前の章を表示するために、bibleアプリがスライドされている様子を示します。 例：

Answer 1

これは、jqueryで使用するボタンを使用しないでスライドする例です。

$(document).ready(function(){ 
 
    $('#content1').addClass('addbdr1'); 
 
    $('#content1').show(); 
 
    $('#content2').hide(); 
 
    $('#content3').hide(); 
 
function slider(){ 
 
setTimeout(function(){ 
 
    $('#content1').hide(0); 
 
    $('#content3').fadeOut(); 
 
    $('#content2').addClass('addbdr'); 
 
    $('#content2').slideDown(); 
 
},1000); 
 
setTimeout(function(){ 
 
    $('#content1').fadeOut(); 
 
    $('#content2').fadeOut(); 
 
    $('#content3').addClass('addbdr1'); 
 
    $('#content3').slideDown(); 
 
},4000); 
 
setTimeout(function(){ 
 
    $('#content2').fadeOut(); 
 
    $('#content3').fadeOut(); 
 
    $('#content1').addClass('addbdr1'); 
 
    $('#content1').slideDown(); 
 
},6000); 
 
} 
 
    slider(); 
 
    setInterval(function(){ 
 
    slider(); 
 
    },8000); 
 
      
 
});

.slide{ 
 
    position:absolute; 
 
    left:10%; 
 
    top:10%; 
 
    width:100px; 
 
    height:100px; 
 
    border:1px solid; 
 
    text-align:center; 
 
    padding-top:10%; 
 
} 
 
.addbdr{ 
 
border:1px solid green; 
 
color:red; 
 
} 
 
.addbdr1{ 
 
border:1px solid #600; 
 
color:gold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slide" id="content1">content1</div> 
 
<div class="slide" id="content2">content2</div> 
 
<div class="slide" id="content3">content3</div>