• Címkék:
  • slider
  • kép
  • diavetítő
  • slideshow
  • csúsztat
  • lapozó

ChopSlider

Példa

Jelenleg csak egyetlen példa kerül bemutatásra, de aki szeretné látni milyen további lehetőségek rejlenek még a plugin-ban (akad bőven!),
látogasson el a plugin honlapjára: www.idangero.us/cs

slide1
slide2
slide3
slide4

Deklaráció

        $(document).ready(function(){
          $('#slider').chopSlider({
            loader : '#slide-loader',
            loaderIndex : 20000,
            slide : '.slide',
            nextTrigger : 'a#slide-next',
            prevTrigger : 'a#slide-prev',
            everyCaptionIn: '',
            useCaptions : true,
            type: 'multi',
            disableCSS3 : false,
            xOffset: 30,
            yOffset: 30,
            hPieces : 10,
            vPieces: 10,
            rotate : 0,
            rotateSymmetric: true,
            scaleX:1,
            scaleY:1,
            translateX:0,
            translateY:0,
            ease1:'ease-in',
            ease2:'ease-out',
            origin:'center center',
            dur1: 1000,
            dur2 :300,
            dur3: 1000,
            pieceDelay : 100,
            xFadeDelay : 0,
            autoplay:false,
            autoplayDelay:100,
            hideControls:true,
            onStart: function(){  },
            onEnd: function(){  },
            prevTransition: { rotate:-10, xOffset:10 },
            mobile: {
              disableCSS3:true,
              dur1:1200,
              dur2:1200,
              dur3:1200,
              hPieces:4,
              vPieces:4,
              pieceDelay:120,
              rotate:0,
              yOffset:0,
              scaleX:1,
              scaleY:1
            },
            noCSS3: {
              dur1:1200,
              dur2:1200,
              dur3:1200,
              hPieces:4,
              vPieces:4,
              pieceDelay:120,
              xFadeDelay :200
            }
          })
        });
      

HTML kód

        <div class="buttons">
          <a id="slide-next" href="#"></a>
          <a id="slide-prev" href="#"></a>
        </div>
        <div id="sliderContainer">
          <div id="slider">
            <div class="slide activeSlide"><img src="images/img1.jpg" width="800" height="400" alt="slide1" /></div>
            <div class="slide"> <img src="images/img2.jpg" width="800" height="400" alt="slide2" /></div>
            <div class="slide"> <img src="images/img3.jpg" width="800" height="400" alt="slide3" /></div>
            <div class="slide"> <img src="images/img4.jpg" width="800" height="400" alt="slide4" /></div>
          </div>
          <div id="slide-loader"></div>
        </div>
      

« bezár