Jak zrobić slider ?

pytanie zadane 21 listopada 2015 w HTML i CSS przez damianlxlx5 Obywatel (1,880 p.)

Witam

Chciałbym umieścić na swojej stronie slider czyli efektywne przewijanie zdjęć.

Zależy mi na tym żeby zdjęcie przesówały się automatycznie a także po kliknięcu w przycisk,żeby były efekty przejścia i takie menu z możliwością przełącznie zdjęcia na dole.

Czy trudno jest wykonać taki slider i czy da się to zrobić na samym html'u i css czy potrzebna jest do tego jeszcze znajomość javascript'u ?

Znacie może jakieś gotowe strony z takimi sliderami żebym mógł sobie pobrać i przerobić jak mi pasuje ?

5 odpowiedzi

odpowiedź 21 listopada 2015 przez Szymon Lisowiec Mądrala (7,150 p.)

odpowiedź 21 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

Pobrałem ten jeden ze sliderów ale nie wiem gdzie wkleić jego poszczególne plik.Gdzie to wrzucić ?

komentarz 21 listopada 2015 przez Szymon Lisowiec Mądrala (7,150 p.)

Na stronie gdzie był slider napewno miałeś też instrukcję. ;)

komentarz 21 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

Z tąd pobierałem i nic tam na temat instrukcji nie ma:

http://www.jssor.com/demos/simple-fade-slideshow.slider

komentarz 21 listopada 2015 przez Szymon Lisowiec Mądrala (7,150 p.)

http://www.jssor.com/development/

odpowiedź 21 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

odpowiedź 21 listopada 2015 przez Michał628496 Pasjonat (17,340 p.)

http://miroslawzelent.pl/kurs-javascript/mechanika-skryptu-uchwyty-funkcje-zdarzenia/

komentarz 21 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

Czy w tym odcinku jest to opisane jak zrobić taki slider ??

komentarz 21 listopada 2015 przez Michał628496 Pasjonat (17,340 p.)

Tak ,ale prawie na końcu

komentarz 21 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

Obejrzałem ten film, jedank muszę przyznać że to co zostało w tym odcinku omówione było dla mnie dosyć trudne do przysowjenia.

odpowiedź 21 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

Wrzuciłem sobie gotowy kod takiego slidera jednak nie wiem jak edytować te przyciski po bokach co zaznaczyłem na screenie.Chcę tam zrobić strzałkę na przykład zamiast jakiejś odwróconej liter L.

Screen:

A tu kod tego slidera:

<html>
<head>

<style type="text/css">
#rt-showcase.slider-container { background: #FFFFF; }
.slider-container {
    padding-top: 10px;
}
.slider-container .csslider1 {
    position: relative;
    display: block;
    margin: 0 auto !important;
	.
}
</style>
</head>
<body>
<!-- slider -->
        <section id="rt-showcase-surround">
            <div id="rt-showcase" class="slider-container rt-overlay-dark">
                <div class="rt-container slider-container">
                    <div class="rt-grid-12 rt-alpha rt-omega">

                    
<link rel="stylesheet" href="http://cssslider.com/sliders/demo-4/engine1/style.css">
<!--[if IE]><link rel="stylesheet" href="http://cssslider.com/sliders/demo-4/engine1/ie.css"><![endif]-->
<!--[if lte IE 9]><script type="text/javascript" src="http://cssslider.com/sliders/demo-4/engine1/ie.js"></script><![endif]-->

<div class="csslider1 autoplay">
    <input name="cs_anchor1" id="cs_slide1_0" type="radio" class="cs_anchor slide">
    <input name="cs_anchor1" id="cs_slide1_1" type="radio" class="cs_anchor slide">
    <input name="cs_anchor1" id="cs_slide1_2" type="radio" class="cs_anchor slide">
    <input name="cs_anchor1" id="cs_play1" type="radio" class="cs_anchor" checked>
    <input name="cs_anchor1" id="cs_pause1" type="radio" class="cs_anchor" >
    <ul>
        <div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0; height:320;">
            <img src="

http://cssslider.com/sliders/demo-4/data1/images/5.jpg

" style="width: 20%;">
        </div>
        <li class="num0 img" style="height:320;">
            <img src="

http://cssslider.com/sliders/demo-4/data1/images/5.jpg

" alt="Clouds" title="Clouds" />
        </li>
        <li class="num1 img" style="height:320;">
            <img src="http://cssslider.com/sliders/demo-4/data1/images/6.jpg" alt="Typewriter" title="Typewriter" />
        </li>
        <li class="num2 img" style="height:320;">
            <img src="http://cssslider.com/sliders/demo-4/data1/images/5.jpg" alt="Bicycle" title="Bicycle" />
        </li>
    
    </ul>
    <div class="cs_description">
        <label class="num0">
            <span class="cs_title"><span class="cs_wrapper">Zobacz</span></span>
            
        </label>
        <label class="num1">
            <span class="cs_title"><span class="cs_wrapper">jakie</span></span>
            
        </label>
        <label class="num2">
            <span class="cs_title"><span class="cs_wrapper">Jakie to proste</span></span>
            
        </label>
    </div>
    
    <div class="cs_arrowprev">
        <label class="num0" for="cs_slide1_0"></label>
        <label class="num1" for="cs_slide1_1"></label>
        <label class="num2" for="cs_slide1_2"></label>
    </div>
    <div class="cs_arrownext">
        <label class="num0" for="cs_slide1_0"></label>
        <label class="num1" for="cs_slide1_1"></label>
        <label class="num2" for="cs_slide1_2"></label>
    </div>
    
    <div class="cs_bullets">
        <label class="num0" for="cs_slide1_0">
            <span class="cs_point"></span>
            <span class="cs_thumb"><img src="http://cssslider.com/sliders/demo-4/data1/tooltips/4.jpg" alt="Clouds" title="Clouds" /></span>
        </label>
        <label class="num1" for="cs_slide1_1">
            <span class="cs_point"></span>
            <span class="cs_thumb"><img src="http://cssslider.com/sliders/demo-4/data1/tooltips/6.jpg" alt="Typewriter" title="Typewriter" /></span>
        </label>
        <label class="num2" for="cs_slide1_2">
            <span class="cs_point"></span>
            <span class="cs_thumb"><img src="http://cssslider.com/sliders/demo-4/data1/tooltips/5.jpg" alt="Bicycle" title="Bicycle" /></span>
        </label>
    </div>
    
</div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </section> 
        <!-- /slider -->
</body>
</html>