Wsparcie » Wtyczki » Slider jquery mały problem

  • Rozwiązano Arky88

    (@arky88)


    Witajcie,

    stawiam właśnie stronę opartą o WordPressa i mam malutki problem. Korzystam z motywu Vantage i postanowiłem na dole i na górze strony głównej wstawić slidery. Na górze zwykły reklamowy (ten działa bez problemu) i drugi na dole przewijający loga klientów. Wykorzystałem do tego widget do wstawiania tekstu lub htmla. Górny slider działa jak należy. Dolny ma problem.

    Kod który wklejam (od dolnego slidera) to:

    ,<!-- it works the same with all jquery version from 1.x to 2.x -->
        <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
        <!-- use jssor.slider.mini.js (40KB) or jssor.sliderc.mini.js (32KB, with caption, no slideshow) or jssor.sliders.mini.js (28KB, no caption, no slideshow) instead for release -->
        <!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.core.js + jssor.utils.js + jssor.slider.js) -->
        <script type="text/javascript" src="../js/jssor.core.js"></script>
        <script type="text/javascript" src="../js/jssor.utils.js"></script>
        <script type="text/javascript" src="../js/jssor.slider.js"></script>
        <script>
    
            jQuery(document).ready(function ($) {
                var options = {
                    $AutoPlay: true,
    
                    $PauseOnHover: false,                               //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false
    
                    $ArrowKeyNavigation: false,   			            //Allows arrow key to navigate or not
                    $SlideWidth: 216,                                   //[Optional] Width of every slide in pixels, the default is width of 'slides' container
                    $SlideHeight: 66,                                  //[Optional] Height of every slide in pixels, the default is width of 'slides' container
                    $SlideSpacing: 1, 					                //Space between each slide in pixels
                    $DisplayPieces: 5,                                  //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
                    $ParkingPosition: 1      		 ,                                //The offset position to park slide (this options applys only when slideshow disabled).
    
                    $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                        $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                        $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                        $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                        $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
                    }
                };
    
                var jssor_slider1 = new $JssorSlider$("slider1_container", options);
    
                //responsive code begin
                //you can remove responsive code if you don't want the slider scales while window resizes
                function ScaleSlider() {
                    var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
                    if (parentWidth)
                        jssor_slider1.$SetScaleWidth(Math.min(parentWidth, 1080));
                    else
                        window.setTimeout(ScaleSlider, 30);
                }
    
                ScaleSlider();
    
                if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
                    $(window).bind('resize', ScaleSlider);
                }
    
                //if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
                //    $(window).bind("orientationchange", ScaleSlider);
                //}
                //responsive code end
            });
        </script>
        <!-- Jssor Slider Begin -->
        <!-- You can move inline styles to css file or css block. -->
        <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1080px;
            height: 66px; overflow: hidden;">
            <!-- Slides Container -->
            <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1080px; height: 66px;
                overflow: hidden;">
                <div><img u="image" src="../img/klienci/mono/1.png"  /></div>
    			 <div><img u="image" src="../img/klienci/mono/1.png" /></div>
    			  <div><img u="image" src="../img/klienci/mono/1.png" onmouseover="this.src='../img/klienci/kolor/1k.png';" onmouseout="this.src='../img/klienci/mono/1.png';" /></div>
    			   <div><img u="image" src="../img/klienci/mono/1.png" onmouseover="this.src='../img/klienci/kolor/1k.png';" onmouseout="this.src='../img/klienci/mono/1.png';" /></div>
                <div><img u="image" src="../img/klienci/mono/2.png" onmouseover="this.src='../img/klienci/kolor/2k.png';" onmouseout="this.src='../img/klienci/mono/2.png';"/></div>
                <div><img u="image" src="../img/klienci/mono/3.png" onmouseover="this.src='../img/klienci/kolor/3k.png';" onmouseout="this.src='../img/klienci/mono/3.png';"/></div>
                <div><img u="image" src="../img/klienci/mono/4.png" onmouseover="this.src='../img/klienci/kolor/4k.png';" onmouseout="this.src='../img/klienci/mono/4.png';"/></div>
                <div><img u="image" src="../img/klienci/mono/5.png" onmouseover="this.src='../img/klienci/kolor/5k.png';" onmouseout="this.src='../img/klienci/mono/5.png';"/></div>
                <div><img u="image" src="../img/klienci/mono/6.png" onmouseover="this.src='../img/klienci/kolor/6k.png';" onmouseout="this.src='../img/klienci/mono/6.png';"/></div>
                <div><img u="image" src="../img/klienci/mono/7.png" onmouseover="this.src='../img/klienci/kolor/7k.png';" onmouseout="this.src='../img/klienci/mono/7.png';"/></div>
                <div><img u="image" src="../img/klienci/mono/8.png" onmouseover="this.src='../img/klienci/kolor/8k.png';" onmouseout="this.src='../img/klienci/mono/8.png';"/></div>
                <div><img u="image" src="../img/klienci/mono/9.png" onmouseover="this.src='../img/klienci/kolor/9k.png';" onmouseout="this.src='../img/klienci/mono/9.png';"/></div>
                <div><img u="image" src="../img/klienci/mono/10.png" onmouseover="this.src='../img/klienci/kolor/10k.png';" onmouseout="this.src='../img/klienci/mono/10.png';"/></div>
                <div><img u="image" src="../img/klienci/mono/11.png" onmouseover="this.src='../img/klienci/kolor/11k.png';" onmouseout="this.src='../img/klienci/mono/11.png';"/></div>
                <div><img u="image" src="../img/klienci/mono/12.png" onmouseover="this.src='../img/klienci/kolor/12k.png';" onmouseout="this.src='../img/klienci/mono/12.png';"/></div>
                <div><img u="image" src="../img/klienci/mono/13.png" onmouseover="this.src='../img/klienci/kolor/13k.png';" onmouseout="this.src='../img/klienci/mono/13.png';"/></div>
                <div><img u="image" src="../img/klienci/mono/14.png" onmouseover="this.src='../img/klienci/kolor/14k.png';" onmouseout="this.src='../img/klienci/mono/14.png';"/></div>
                <div><img u="image" src="../img/klienci/mono/15.png" onmouseover="this.src='../img/klienci/kolor/15k.png';" onmouseout="this.src='../img/klienci/mono/15.png';"/></div>
                <div><img u="image" src="../img/klienci/mono/16.png" onmouseover="this.src='../img/klienci/kolor/16k.png';" onmouseout="this.src='../img/klienci/mono/16.png';"/></div>
            </div>
    
        </div>

    Raczej nie jest to problem z bibliotekami js bo skopiowałem je do katalogu js w katalogu głównym. Wybaczcie jeśli problem jest błahy ale jestem w tym początkujący i spędziłem już całą noc na szukaniu rozwiązania…

    Będę wdzięczny za sugeste.

    Dodam że robiąc zwykłą stronę html z tym sliderem wszystko działa jak należy.

    Pozdrawiam
    Marcin

Viewing 1 replies (of 1 total)
  • Thread Starter Arky88

    (@arky88)

    Rozgryzłem 🙂 trzeba było zmienić nazwę slidera i divów. Do zamknięcia 🙂

Viewing 1 replies (of 1 total)
  • Temat ‘Slider jquery mały problem’ jest zamknięty na nowe odpowiedzi.