Można przy użyciu jQuery:
Tworzysz np. div'a (nazwijmy go pojemnik) o wielkości takiego slajdera i ustawiasz mu w css'ie overflow-x: scroll; - to sprawi, że wszystko co będzie w tym div'ie szersze niż on sam, będzie wyświetlane w postaci poziomego paska scroll'owania na dole tego div'a.
Teraz wewnątrz tego pojemnika robisz div'y jego wielkości, ułożone obok siebie (np. za pomocą float: left;), które rzecz jasna będą slajdami.
Ta idea wygląda mniej więcej tak:
Możesz sobie to porównać do tego "czerwonego okienka" na kalendarzu które przesuwasz, żeby zmienić dzień. Tylko, że tu to "okienko" jest nieruchome, a to "dni (czyli slajdy)" będziemy przewijać :)
No i tutaj wkracza jQuery:
Musisz stworzyć sobie np. pod pojemnikiem trzy (w tym wypadku) przyciski, których kliknięcia będziemy obsługiwać - będą one służyły do przewijania slajdera. Załóżmy, że będzie to coś takiego:
<button class="myButton" id="button1" type="button">1</button>
<button class="myButton" id="button2" type="button">2</button>
<button class="myButton" id="button3" type="button">3</button>
No i teraz musimy w JavaScript'cie (a tak dokładnie to w jQuery), "złapać" kliknięcie danego przycisku. Można to zrobić tak:
$(function () {
$('#button1').click(function () { //coś tam });
$('#button2').click(function () { //coś tam });
$('#button3').click(function () { //coś tam });
});
gdzie:
$(function () {
});
to funkcja wykonująca się gdy dokument jest "gotowy", to znaczy załadowany. Jest to skrócony zapis tej wersji:
$(document).ready(function () {
});
$('#button1')
to uchwyt przycisku pierwszego po id (# na początku - id, . - to klasa). W czystym js'ie było by to tak:
document.getElementById('button1')
.click(function () { });
To zdarzenie jakie chcemy wykryć (click = kliknięcie): https://learn.jquery.com/events/handling-events/
Teraz zajmijmy się poziomym scrollowaniem. Służy do tego funkcjia jQuery .animate, a my będziemy korzystać z jej argumentu o nazwie (w tym przypadku) scrollLeft. Określa on ilość pikseli o jaką pojemnik ma się "odepchnąć" od lewej strony swoim scrollem.
Załóżmy, że slajd ma szerokość 600px. Jeśli będziemy chcieli wyświetlić pierwszy slajd pojemnikowi scrollLeft ustawimy na 0px, ale jak będziemy chcieli pokazać drugi to scrollLeft będzie równy 600px itd.
A funkcja animate sprawia, że będzie to animowane:
$('#button1').click(function () { $('#pojemnik').animate({scrollLeft: 0}, {600}); });
Wartość "600" po przecinku oznacza ilość milisekund przez jaką ma się wykonywać animacja scrollowania, a "0" po dwukropku to ilość pikseli od lewej strony.
Postaraj się samemu to poskładać. Jakbyś miał jakiś problem to pisz :)