jquery slide to show divs

Question

Я хочу создать несколько div с текстовым содержимым, которое я могу показывать, чтобы показать и скрыть div без какой-либо кнопки, используя jquery. (например, перелистывание страниц книги). Например, как библейские приложения были слайдами для отображения следующих и предыдущих разделов. Пример:

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>