Witajcie, dzisiaj mam do zrobienia slider w jQuery (to wymóg!) z jakąś animacją css. Z tego co zauwazyłem jQuery ma gotowe funkcje typu slide i animate tylko to talnie nie wiem jak to wszystko zebrac do kupy... Divy maja się zmieniac i np. każdej zmianie ma towarzyszyć zmiana opacity (efekt przenikania) bądź możecie użyc innego efektu css grunt żebym wiedział o co chodzi... Z góry dziękuje i pozdrawiam

[HTML] pobierz, plaintext 
<div id="slider">
				<div class="slide">
					<img src="images/top.jpg" alt="Top" />
					<p>Witamy na stronie luksusowego sklepu nazwa sklepu. W swojej bogatej ofercie posiadamy xyz... </p>
				</div>
				<div class="slide">
					<img src="images/top2.jpg" alt="Top" />
					<p>Kolejna treść newsa... Miejmy nadzieje że zakupy w naszym sklepie będą dla Państwa przyjemnością...</p>
				</div>
				<div class="slide">
					<img src="images/top3.jpg" alt="Top" />
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
				</div>
			</div>
[HTML] pobierz, plaintext 

Nad kilkoma rzeczami musisz się zastanowić zanim zaczniesz implementować slider.

Czy animacja będzie się wykonywać automatycznie, czy tylko na kilk użytkownika. Czy tylko automatycznie? Czy jedno i drugie? Czy nawigacją będzie tylko prev/next, czy chces mieć też numery konkretnych slajdów. Czy też zmiana slajdu będzie następowała po prostu po kliknięciu w slajd?

Najprostszy slajder:

[HTML] pobierz, plaintext 
            $(function() {
                var num_of_slides = 3;
                var current_slide = 1;
 
                $('.slide').click(function() {
                    if(current_slide == num_of_slides) {
                        // jesli aktualnie pokazywany jest ostatni slajd, schowaj go, ustaw licznik na 1 i pokaz pierwszy slajd
                    } else {
                        // schowaj aktualnie pokazywany slajd
                        $('.slide[data-slide=' + current_slide + ']').fadeOut(600);
 
                        // dodaj 1 do licznika i pokaz kolejny slajd za pomoca funkcji fadeIn()
                    }
                });
            });
[HTML] pobierz, plaintext 

Jak widzisz ilość slajdów jest wpisana "z palca", jeśli chcesz by jQuery automatycznie zliczało ile jest slajdów na stronie, zainstersuj się funkcją size().
Do tego musisz dodać do swojego kodu HTML atrybut data-slide="[numer slajdu]" do każdego diva klasy "slide". Oczywiście można i to zautomatyzować, tylko po co, jak HTML5 daje nam właśnie data-*
Założenie powyżego slajdera jest takie, że slajdy zmieniają się tylko do przodu (chyba że aktualnie wyświetlany jest ostatni slajd, wtedy wraca na początek) i tylko po kliknięciu w dany slajd.
Jeśli chcesz coś bardziej zaawansowanego.. musisz pokombinować Jeśli np. chcesz zrobić automatyczną animację, wskazówką może być funkcja setInterval()

super ekstra fantastycznie ;D tylko powiedz mi jak moge zastosować do tego jakis efekt css (np. coś z opacity)?

Jeśli chcesz kontrolować efekty przejścia za pomocą CSS, możesz dodać do klasy .slide właściwość transition, nadać wszystkim .slide opacity 0 i stworzyć nową klasę, np. .slide-active z opacity:1

[HTML] pobierz, plaintext 
.slide {
    transition: all 0.5s ease-in-out;
    opacity: 0;
}
 
.slide-active {
    opacity: 1;
}
[HTML] pobierz, plaintext 

I teraz musisz trochę zmodyfikować ten kod co podałem wcześniej, a mianowicie wywalić wywołanie funkcji fadeOut() / fadeIn(), bo zamiast nich będziesz używał addClass('slide-active') do pokazywania slajdu i removeClass() do chowania.
Oczywiście w definicji transition możesz pokombionować z różnymi "easing functions" (ja użyłem ease-in-out) jak też czasem trwania przejścia itd.

Mam jeszcze małe pytanko, bo próbowałem zaimplementować ten kod

[HTML] pobierz, plaintext 
$(function() {
                var num_of_slides = 3;
                var current_slide = 1;
 
                $('.slide').click(function() {
                    if(current_slide == num_of_slides) {
                        // jesli aktualnie pokazywany jest ostatni slajd, schowaj go, ustaw licznik na 1 i pokaz pierwszy slajd
                    } else {
                        // schowaj aktualnie pokazywany slajd
                        $('.slide[data-slide=' + current_slide + ']').fadeOut(600);
 
                        // dodaj 1 do licznika i pokaz kolejny slajd za pomoca funkcji fadeIn()
                    }
                });
            });
[HTML] pobierz, plaintext 

tzn dodałem do divów data-slide"wartość" ale i tak widać wszystkie divy 1 pod drugim.

Rozumiem że w linijce 7 mam dodać coś w stylu display none, jak się teraz do tego odwołać...

Slajdy pokazują się jeden pod drugim, bo trzeba je odpowiednio wypozycjonować Najlepiej użyć do tego po prostu position. Wkładasz wszystkie div.slide z jeden kontener, np. <div class="slider"><-- slajdy --></div> nadajesz mu position inne niż static (np. position: relative), a div.slide pozycjonujesz za pomocą position: absolute:

[HTML] pobierz, plaintext 
<style>
.slider {
    position:relative;
}
.slide {
    transition:all 0.5s ease-in-out;
    opacity:0;
    position:absolute;
    top:0;
    left:0;
}
.slide-active {
    opacity:1;
}
</style>
 
<div class="slider">
    <div class="slide slide-active" data-slide="1">...</div>
    <div class="slide" data-slide="2">...</div>
     ...
</div>
[HTML] pobierz, plaintext 

Generalnie bazowo każy slajd jest niewidoczny (opacity:0) i są one nałożone jeden na drugi (position:absolute;top:0;left:0). Pierwszy slajd będzie się jednak pokazywał, bo dajesz mu na start klasę "slide-active".
Teraz jeśli chodzi o pokazywanie i chowanie slajdów, nie musisz dawać display:none; - zamiast tego kontrolujesz to za pomocą klasy slide-active, czyli w 7-mej linijce tego przykładowego kodu JS dajesz coś w stylu:

[HTML] pobierz, plaintext 
$('.slide[data-slide=' + current_slide + ']').removeClass('slide-active');
[HTML] pobierz, plaintext 

Przez to "zabierasz" temu slajdowi opacity:1
Żeby pokazać slajd robisz analogicznie, tylko zamiast removeClass('slide-active') używasz addClass('slide-active')