Как создать текстовый слайдер

Question

Я пытаюсь создать текстовый слайдер.
В настоящее время я создаю веб-сайт и хотел бы добавить раздел, где я могу отображать отзывы клиентов, и он меняется от одного отзыва к другому.

Answer 1

Вы не можете сделать это только с помощью HTML и CSS.
Вам нужно будет использовать Javascript, который, предполагая, что у вас есть этот HTML:

<div class="customer_review" id="review0"> 
    Some contents 
</div> 
... 
<div class="customer_review" id="review14" style="display:none;"> 
    Some other contents 
</div> 

Ваш Javascript будет выглядеть примерно так:

var current_id = 0; 

function newCustomerReview() { 
    // get all review elements 
    var reviews = document.getElementsByClassName("customer_review"); 
    current_id = (current_id < reviews.length) ? current_id++ : current_id = 0; 
    for(var i = 0; i < reviews.length; i++) { 
    // iterate through every review element 
    var myReview = reviews[i]; 
    // check if it is the new one we want 
    if (i == current_id) { 
     myReview.setAttribute("style", "display: block;"); 
     // or just remove style attribute 
    } 
    else { 
     myReview.setAttribute("style", "display: none;"); 
    } 
    } 
    setTimeout("newCustomerReview();", 3000); 
} 

setTimeout("newCustomerReview();", 3000); // to start updating every 3 seconds