[HTML & CSS]Jak zrobić slider ze strzałkami,automatycznym przewijaniem i kropkami w html i css POMOCY!

Jak wstawić do strony którą piszę w notatniku w html i css slider ze strzałkami,kropkami i automatycznym przewijaniem chodzi mi o takiego slidera jak na tej stronie:

http://www.midnight.com.pl/

tutaj zaznaczyłem strzałkami co chcę by było na sliderze:

i żeby obrazki przewijały się automatycznie co np; 5 sec 

i slider by był na całą szerokość strony 

BARDZO WAS PROSZĘ O POMOC!

Użytkownik Alvarosek edytował ten post 24 sierpnia 2014 - 10:07

ale ja nie wiem jak dodać te jquery i java script do html w notatniku @writen

wytłumaczyłbyś mi jak dodać slidery w jquery itp do notatnika w html ?

Użytkownik Alvarosek edytował ten post 24 sierpnia 2014 - 11:20

http://designgrapher.com/25-html5-and-css3-sliders-free-to-use/
http://demosthenes.info/blog/831/HTML5-Responsive-Image-Slider-With-Captions
http://creativejuiz.fr/trytotry/juizy-slideshow-full-css3-html5/#sl_i1

ale ja nie wstawiłem strony do neta tylko projektuje ją w notatniku w html i sprawdzam ją w przeglądarce ctrl + o 

jak to zrobić ten slider w notatniku ?

opiszecie mi te jquery?

dziekuje że włączacie się w pomoc

Użytkownik Alvarosek edytował ten post 24 sierpnia 2014 - 12:17

ale ja nie wstawiłem strony do neta tylko projektuje ją w notatniku w html i sprawdzam ją w przeglądarce ctrl + o 

jak to zrobić ten slider w notatniku ?

opiszecie mi te jquery?

 

dziekuje że włączacie się w pomoc

Nie musisz wstawiać storny do neta. Twoja przeglądarka na pewno obsługuje javascript. Poza tym podałem Ci przyklady bez uzycia jQuery, sam html i css.

Na początku dodaj do swojej strony html link do biblioteki jQuery, najlepiej na końcu dokumentu przed zamknięciem znacznika </html>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Możesz również pobrać i wrzucić sobie do własnego pliku jquery.js, ale to już zależy od tego, czy pracujesz offline, czy nie.

Następnie znajdź sobie skrypt slidera, który ci odpowiada i zobacz jak wygląda przykładowy slider, powinno być podana składnia i jak go uruchomić. 

http://bxslider.com/ - zobacz sobie ten slider, nie korzystałem z niego jeszcze, ale wygląda na całkiem fajny i prosty.

Pragnę mieć na swojej stronie taki slider jak jest na tej stronie :

http://www.midnight.com.pl/

na całą szerokość strony

czy da sie zrobić taki slider w html i css ze strzałkami,automatycznym przewijaniem zdjęć i z tymi kropkami na dole?

jeżeli tak to pomożecie mi go zrobić?

bardzo mi na tym zależy i mam nadzieję ze mi pomożecie bo widzę że jesteście profesjonalistami w tych klockach.

pomoże ktoś błagam was

Użytkownik Alvarosek edytował ten post 24 sierpnia 2014 - 15:56

No przecież masz przykłady podane wyżej.

Co takiego trudnego jest w przeczytaniu instrukcji instalacji skryptu do naszego pliku .html?

A może kurde jest komuś trudno to przeczytać i ogarnąć ? Postawcie się w innej pozycji niż wasza. To też nic trudnego.

A może kurde jest komuś trudno to przeczytać i ogarnąć ? Postawcie się w innej pozycji niż wasza. To też nic trudnego.

To smaruj w jssfiddle rotator w HTML i CSS  

Jeśli się nie przyłożysz i nie poświecisz trochę czasu, to faktycznie może być trudno to ogarnąć. Ale skoro komuś się nie chce, to dlaczego ja mam poświęcać swój czas?

ja próbuję to wstawić ale nie mogę tego ogarnąć   ale po prostu mi to nie wychodzi wiem że może nie macie czasu czy coś ale proszę was oznajmijcie jak po kroku zrobić taki slider jak jest na tej stronie 

http://www.midnight.com.pl/

możecie nawet spisać kod z tej strony czy coś ale błagam was pomóżcie mi to dla mnie bardzo ważne

Nie zrobisz takiego slidera nie mając podstawowej wiedzy. Na pewno też nikt nie zrobi tego za Ciebie, wystarczy że wejdziesz na linki podane wcześniej przez kolegów, pobierzesz którąś paczkę i podepniesz slider pod swoje htmle napisane w notatniku tak jak napisał Ci testerius.

W tym wątku masz już wszystko co potrzebne żeby dodać slider do strony w html napisanej w notatniku. Przeglądnij tematy od nowa i jak dalej masz jakieś problemy to opisz dokładniej co jest nie tak.

właśnie ja to robię ale nie wychodzi mi to można zrobić taki slider co na tej stronie midnight w html i css ? 

proszę pomóżcie mi to zrobić

Nie zrobisz tego tylko w html i css, musisz mieć jquery.

Co konkretnie Ci nie wychodzi?

dodacie mi do tego slidera automatyczne przewijanie co 5 sec ?

<html>
<body>
<ul class="slider">
    <li>
        <input type="radio" id="slide1" name="slide" checked>
        <label for="slide1"></label>
        <img src="http://www.hdwallpapersinn.com/wp-

content/uploads/2014/07/HD-Wallpapers-1080p.jpg">
    </li>
    <li>
        <input type="radio" id="slide2" name="slide">
        <label for="slide2"></label>
        <img src="http://wallpaperfeed.com/wp-

content/uploads/2013/12/sunbeams-on-tree-nature-wallpaper-hd.jpg">
    </li>
    <li>
        <input type="radio" id="slide3" name="slide">
        <label for="slide3"></label>
        <img src="http://newevolutiondesigns.com/images/freebies/hd-

wallpaper-10.jpg">
    </li>
    <li>
        <input type="radio" id="slide4" name="slide">
        <label for="slide4"></label>
        <img src="https://encrypted-tbn0.gstatic.com/images?

q=tbn:ANd9GcSUSMuckoiLY8Pz1Hif87FGSXn9INnTnakJq4r78ZF-

PhkeM2DI">
    </li>
</ul>​
<style>
.slider {
    background-color: #fff;
    box-shadow: inset 0 0 2px hsla(0,0%,0%,.2),
                0 3px 1px hsla(0,0%,100%,.75),
                0 -1px 1px 2px hsla(0,0%,0%,.1);
    height: 37em;
    left: 13%;
    margin: -8em -13em;
    padding: .5em;
    position: absolute;
    top: 36%;
    width: 114em;
}
.slider:before {
    background-color: #22130c;
    bottom: -2.5em;
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2),
                inset 0 -2px 1px hsla(0,0%,0%,.4),
                0 5px 50px hsla(0,0%,0%,.25),
                0 20px 20px -15px hsla(0,0%,0%,.2),
                0 30px 20px -15px hsla(0,0%,0%,.15),
                0 40px 20px -15px hsla(0,0%,0%,.1);
    content: '';
    left: -2.5em;
    position: absolute;
    right: -2.5em;
    top: -2.5em;
    z-index: -1;
}
.slider:after {
    background-color: #fff5e5;
    bottom: -1.5em;
    box-shadow: 0 2px 1px hsla(0,0%,100%,.2),
                0 -1px 1px 1px hsla(0,0%,0%,.4),
                inset 0 2px 3px 1px hsla(0,0%,0%,.2),
                inset 0 4px 3px 1px hsla(0,0%,0%,.2),
                inset 0 6px 3px 1px hsla(0,0%,0%,.1);
    content: '';
    left: -1.5em;
    position: absolute;
    right: -1.5em;
    top: -1.5em;
    z-index: -1;
}
.slider li {
    box-shadow: 0 -1px 0 2px hsla(0,0%,0%,.03);
    list-style: none;
    position: absolute;
}
.slider input {
    display: none;
}
.slider label {
    background-color: #111;
    background-image: linear-gradient(transparent, hsla(0,0%,0%,.25));
    border: .2em solid transparent;
    bottom: .5em;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    height: .5em;
    left: 24em;
    opacity: 0;
    position: absolute;
    transition: .25s;
    width: .5em;
    visibility: hidden;
    z-index: 10;
}
.slider label:after {
    border-radius: 100%;
    bottom: -.2em;
    box-shadow: inset 0 0 0 .2em #111,
                inset 0 2px 2px #000,
                0 1px 1px hsla(0,0%,100%,.25);
    content: '';
    left: -.2em;
    position: absolute;
    right: -.2em;
    top: -.2em;
}
.slider:hover label {
    opacity: 1;
    visibility: visible;
}
.slider input:checked + label {
    background-color: #fff;
}
.slider:hover li:nth-child(1) label {
    left: .5em;
}
.slider:hover li:nth-child(2) label {
    left: 2em;
}
.slider:hover li:nth-child(3) label {
    left: 3.5em;
}
.slider:hover li:nth-child(4) label {
    left: 5em;
}
.slider img {
    height: 37em;
    opacity: 0;
    transition: .25s;
    width: 114em;
    vertical-align: top;
    visibility: hidden;
}
.slider li input:checked ~ img {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}
</style>
</body>

Widzę że użyłeś jakiegoś gotowca, bardzo dobrze. Nie będziemy pisać czegoś, co już zostało napisane, teraz podepnij pliki js w taki sposób jak Ci testerius opisał. Postępuj zgodnie z dokumentacją slidera.