Tekil Mesaj gösterimi - Otomatik Kayan Jquery Slider

Konu Otomatik Kayan Jquery Slider

27-10-2015, 09:13:47

Merhaba Arkadaşlar,
Jquery Konusunda Pek Bilgim Olmadığı için Otomatik Geçişi Ekleyebildiğim Bir Sliderim Yok Malesef,
Hali Hazırda Şuanda Yapmış Olduğum Slide'a Nasıl Otomatik Geçiş Ekleyebilirim 5 - 6 Saniyede Bir
Lütfen Yardımcı Olurmusunuz,

Slide Linki : http://basimhane.com.tr/

HTML CODU

<div id="banner">
    <div id="Slider">
        <div class="sliders cs-default nav-hide bg-dark" data-slider="responsive-1156 media-940-960-1281 media-748-768-959 mCanvas-20 speed-1200 isLoop-off isNav-on isPag-on isKeyboard-on idCur-0">
            <div>
                <a class="cs-img" href="Upload/Banner/slide1/1.jpg" style="background-color: #fa0"></a>
                <div class="show-desktop" data-layer="xy-rightOut; x-center y-357 x-290 start-0;">
                    <h1 style="font-size: 27px; color:#0b1326; line-height:29px; text-align:right; margin:15px 0px 5px 29px; font-weight:bold; width:350px; display:block; float:left; white-space: normal; font-family:'HelveticamBold'; ">İŞİMİZ HAYALLERİNİZİ YAKALAMAK, DOKUNMAK VE TASARLAMAK</h1>
                </div>
                <div class="show-desktop" data-layer="xy-leftOut; x-top y-100 x-10 start-200;" style="margin-left:-100px;">
                    <img src="Upload/Banner/slide1/2.png" alt="2" />
                </div>
                <div class="show-desktop" data-layer="xy-topOut; x-center y-222 x-485 start-100;">
                    <img src="Upload/Banner/slide1/3.jpg" alt="Tab 1" />
                </div>
                <div class="show-desktop" data-layer="xy-rightOut; x-center y-222 x-707 start-500;">
                    <img src="Upload/Banner/slide1/4.jpg" alt="Tab 2" />
                </div>
                <div class="show-desktop" data-layer="xy-bottomOut; x-center y-346 x-707 start-1100;">
                    <img src="Upload/Banner/slide1/5.jpg" alt="Tab 3" />
                </div>
            </div>
            <div>
                <a class="cs-img" href="Upload/Banner/slide2/1.jpg" style="background-color: #fa0"></a>
                <div class="show-desktop" data-layer="xy-rightOut; x-center y-357 x-290 start-0;">
                    <h1 style="font-size: 25px; color:#0b1326; line-height:29px; text-align:right; color:#fefefe; margin:0 0px 5px 29px; font-weight:bold; width:360px; display:block; float:left; white-space: normal; font-family:'HelveticamBold'; ">BASKI TASARIMIN HAYAT BULDUĞU, ANLAM KAZANDIĞI, ELLE TUTULUR EN ETKİLİ MECRA</h1>
                    <div class="clear"></div>
                    <span style="color:#f6f6f6; float:right; margin-top:20px; font-size:15px;">Hayallerinizi Yakalayın!</span>
                </div>
                <div class="show-desktop" data-layer="xy-topOut; x-center y-222 x-485 start-100;">
                    <img src="Upload/Banner/slide2/2.jpg" alt="Tab 1" />
                </div>
                <div class="show-desktop" data-layer="xy-bottomOut; x-center y-346 x-707 start-1100;">
                    <img src="Upload/Banner/slide2/3.jpg" alt="Tab 3" />
                </div>
            </div>
            <div>
                <a class="cs-img" href="Upload/Banner/slide3/1.jpg" style="background-color: #fa0"></a>
                <div class="show-desktop" data-layer="xy-rightOut; x-center y-230 x-425 start-0;">
                    <h1 style="font-size: 27px; color:#f04e23; line-height:29px; text-align:right; margin:0 0px 5px 29px; font-weight:bold; width:480px; display:block; float:left; white-space: normal; font-family:'HelveticamBold'; ">ŞAPKADAN DATA ÇIKARMAK!</h1><div class="clear"></div>
                    <h1 style="font-size: 27px; color:#0b1326; line-height:29px; text-align:right; margin:0 0px 5px 29px; font-weight:bold; width:480px; display:block; float:left; white-space: normal; font-family:'HelveticamBold'; ">YAZILIM SİHİRLİ BİR DOKUNUŞ GİBİ SANAL, FAKAT BİR O KADARDA GERÇEK!</h1>
                </div>
                <div class="show-desktop" data-layer="xy-bottomOut; x-center y-356 x-490 start-1100;">
                    <img src="Upload/Banner/slide3/2.jpg" alt="Tab 2" />
                </div>
                <div class="show-desktop" data-layer="xy-bottomOut; x-center y-356 x-712 start-1100;">
                    <img src="Upload/Banner/slide3/3.jpg" alt="Tab 2" />
                </div>
            </div>
            <div>
                <a class="cs-img" href="Upload/Banner/slide4/1.jpg" style="background-color: #fa0"></a>
                <div class="show-desktop" data-layer="xy-rightOut; x-center y-158 x-320 start-0;">
                    <h1 style="font-size: 27px; color:#f04e23; line-height:29px; text-align:right; margin:0 0px 5px 29px; font-weight:bold; width:580px; display:block; float:left; white-space: normal; font-family:'HelveticamBold'; ">DERİN BİR NEFES ALIN!</h1><div class="clear"></div>
                    <h1 style="font-size: 27px; color:#0b1326; line-height:29px; text-align:right; margin:0 0px 5px 29px; font-weight:bold; width:580px; display:block; float:left; white-space: normal; font-family:'HelveticamBold'; ">KİMLİĞİNİZİ DOĞRU BİR ŞEKİLDE YANSITACAK, RENGİNİZİ BULACAKSINIZ! AÇIKHAVA SİZE İYİ GELECEK.</h1>
                </div>
                <div class="show-desktop" data-layer="xy-bottomOut; x-center y-320 x-490 start-1100;">
                    <img src="Upload/Banner/slide4/2.jpg" alt="Tab 2" />
                </div>
                <div class="show-desktop" data-layer="xy-bottomOut; x-center y-320 x-712 start-1100;">
                    <img src="Upload/Banner/slide4/3.jpg" alt="Tab 2" />
                </div>
            </div>
            <div>
                <a class="cs-img" href="Upload/Banner/slide5/1.jpg" style="background-color: #fa0"></a>
                <div class="show-desktop" data-layer="xy-rightOut; x-center y-328 x-170 start-0;">
                    <h1 style="font-size: 27px; color:#f04e23; line-height:29px; text-align:right; margin:0 0px 5px 29px; font-weight:bold; width:480px; display:block; float:left; white-space: normal; font-family:'HelveticamBold'; ">ABARTMAYA GEREK YOK!</h1><div class="clear"></div>
                    <h1 style="font-size: 27px; color:#0b1326; line-height:29px; text-align:right; margin:0 0px 5px 29px; font-weight:bold; width:480px; display:block; float:left; white-space: normal; font-family:'HelveticamBold'; ">DAHA KÜÇÜK HEDİYELERLE DE MÜŞTERİLERİNİZİ MEMNUN EDEBİLİRSİNİZ</h1>
                </div>
                <div class="show-desktop" data-layer="xy-topOut; x-center y-190 x-470 start-1100;">
                    <img src="Upload/Banner/slide5/2.jpg" alt="Tab 2" />
                </div>
                <div class="show-desktop" data-layer="xy-bottomOut; x-center y-314 x-691 start-1100;">
                    <img src="Upload/Banner/slide5/3.jpg" alt="Tab 2" />
                </div>
            </div>
            <div>
                <a class="cs-img" href="Upload/Banner/slide6/1.jpg" style="background-color: #fa0"></a>
                <div class="show-desktop" data-layer="xy-rightOut; x-center y-328 x-170 start-0;">
                    <h1 style="font-size: 27px; color:#0b1326; line-height:29px; text-align:right; margin:0 0px 5px 29px; font-weight:bold; width:480px; display:block; float:left; white-space: normal; font-family:'HelveticamBold'; ">YAYIN AKIŞINA BAND ÇEKİN!</h1><div class="clear"></div>
                    <h1 style="font-size: 27px; color:#f04e23; line-height:29px; text-align:right; margin:0 0px 5px 29px; font-weight:bold; width:480px; display:block; float:left; white-space: normal; font-family:'HelveticamBold'; ">DİKKAT ÇEKİN!</h1>
                </div>
                <div class="show-desktop" data-layer="xy-topOut; x-center y-190 x-470 start-1100;">
                    <img src="Upload/Banner/slide6/2.jpg" alt="Tab 2" />
                </div>
                <div class="show-desktop" data-layer="xy-bottomOut; x-center y-314 x-691 start-1100;">
                    <img src="Upload/Banner/slide6/3.jpg" alt="Tab 2" />
                </div>
            </div>
        </div>
    </div>
    <div id="bannerYazi">
        <ul>
            <li>Tasarım</li>
            <li>Baskılı</li>
            <li>Yazılım</li>
            <li>Açık hava</li>
            <li>Promosyon</li>
            <li>Tv Band Reklam</li>
            <li>Tanıtım Filmi</li>
            <li>İllüstrasyon</li>
        </ul>
    </div>
</div>

JS KODU

<script>
        $(document).ready(function () {
            $('.sliders').codeslider();
        });
    </script>