Slider (najlepiej tylko w HTML)

Witajcie,
chciałabym zrobić slider (najlepiej wykorzystując tylko html). Czytałam, że istnieje takie coś do zrobienia jednak kompletnie nie wiem jak się za to zabrać. Zależy uzyskać taki efekt jak w załączniku- zmienia się obraz i opis po prawej stronie.
Z góry dziękuję wszystkim za poświęcony czas w pomoc dla mnie.
Pozdrawiam.

W google znajdziesz masę gotowców, jeśli szukasz czegoś bez javascript to też sie uda pure css slider, np. http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/ - naciśnij sobie "demo", trochę zabawy i dostosujesz...

Serdecznie dziękuję za pomoc.
Jak uważasz, lepszym rozwiązaniem będzie dodawanie zdjęć już z tym "bocznym paskiem z tekstem" czy kombinować i rozbijać to na dwie osobne części?

Nic nie musisz kombinować. Najprościej w jakimś programie stwórz sobie png w kolorze szarym z półprzeźroczystością 50% czy ileś tam. Następnie możesz nałożyć taką teksturę na jakiś kontener (np div) znajdujący się nad zdjęciem po jego prawej stronie.Do tego możesz Od razu wtedy dodać treść jako zawartość diva i gotowe. Takie coś może nie będzie się pięknie wyświetlać w starym IE ale to już można sobie darować :)

Piotrekdp napisał(a):

Nic nie musisz kombinować. Najprościej w jakimś programie stwórz sobie png w kolorze szarym z półprzeźroczystością 50% czy ileś tam. Następnie możesz nałożyć taką teksturę na jakiś kontener (np div) znajdujący się nad zdjęciem po jego prawej stronie.Do tego możesz Od razu wtedy dodać treść jako zawartość diva i gotowe. Takie coś może nie będzie się pięknie wyświetlać w starym IE ale to już można sobie darować :)

Nienajlepsze podejście. Najlepiej jest użyć rgba(0,0,0,.5) i nie przejmować się starymi przeglądarkami.

Po Twojej odpowiedzi poważnie zastanawiam się czy robienie zdjęć do slidera wraz z tekstem nie jest lepsze. Umieszczałabym w sliderze uprzednio obrobione zdjęcia w photoshopie, które zgrywały by się obróbką ze stylem strony.

Nie. Nie będzie to lepsze, będzie tylko wk... użytkowników którzy chcieli by ewentualnie skopiować takowy tekst. Dodatkowo HTML ma odpowiadać za treść. Jak odpowiednio zawojujesz z CSSem to uzyskasz to co chcesz. Łatwo jest to z resztą zrobić.

Tekst to jest tekst i jako tekst powinien się znaleźć na stronie ;)

1. vide to, co napisał @winerfresh
2. wyszukiwarki nie zaindeksują tekstu "z obrazka"
3. strony się przerabia - łatwiejsza na przyszłość jest podmiana graficzek pod tło niż generowanie nowych "odpowiednim rozłożeniem" tekstu
4. strony przegląða się na różnego typu urządzeniach - tu zmartwieniem będzie tylko odpowiednia grafika pod tło (np. mniejsza dla telefonów) niż generowanie nowych grafik z tekstem
5. itp. itd.

Witajcie,
właśnie robię ten slider i mam pewien problem. Robiłam wszystko według tutoriala i w miejscu gdzie zaczyna się dostosowywanie slidera do ramki na zdjęcie najzwyczajniej się pogubiłam.

Kod (HTML)

<div id="slider">
<ul class="im">
<li>
<img src="img/slider_1.png" />
<input type="radio" id="slider1" name="slider" checked />
<label for="slider1"></label>
</li>
<li>
<img src="img/slider_2.png" />
<input type="radio" id="slider2" name="slider" />
<label for="slider2"></label>
</li>
<li>
<img src="img/slider_3.png" />
<input type="radio" id="slider3" name="slider" />
<label for="slider3"></label>
</li>
</ul>
</div>

Kod (CSS)

#slider {
	width: 960px;
	height: 350px;
	margin-top: 5px;	
}
.im {
	width: 960px;
	height: 350px;	
}
.im li {
	list-style: none;
	position: absolute;
}	
.im img {
	width: 960px;
	height: 350px;
	vertical-align: top;	
}
.im input {
	display: none;	
}
.im label {
	background: url(../img/images/kropki_bg_03.png);
	top: 20px;
	cursor: pointer;
    display: block;	
	position: absolute;
	height: 17px;
	width: 17px;
	z-index: 10;
}
.im li:nth child (1) label {
	left: 18px;	
}
.im li:nth child (2) label {
	left: 35px;	
}
.im li:nth child (3) label {
	left: 52px;	
}
.im img {
    opacity: 0;
    visibility: hidden;
}
.im li input:checked ~ img {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

Po dodaniu ostatniej części css (.im li input) zdjęcia ze slidera znikają i szczerze nie wiem jak to rozwiązać. Próbowałam analizować gotowy kod, ale nie opanowałam jeszcze biegle css. Proszę o pomoc i z góry dziękuję.

Ktoś wie jak rozwiązać mój problem?
Pozdrawiam

Naprawdę nikt nie wie jak rozwiązać mój problem? Jest do dla mnie bardzo ważne...

.im img {
    opacity: 0;
    visibility: hidden;
}

kazde zdjecie w ul class="im" (w twoim przypadku doslownie kazde) ma nadane opacity 0 czyli jest przezroczyste i do tego visibility:hidden. czyli jest niewidoczne. po usunieciu tych dwoch zobaczysz zdjecia na now.

Serdecznie Ci dziękuję!
Teraz tylko pytanie dlaczego mój slider jest "statyczny" i "kropki" od nawigacji są kompletnie niewidoczne...

bo nie ukonczylas tutorialu??? zrob wszytsko od poczatku do konca bo dopiero masz 1/3 kodu...