See a demo below.Ī demo with changing distance between imagesīy changing the value of the variable from 200 to 300 see how carousel looks with rotating images.Īgain, I just changed the reference of the main.js file. Similarly, you can change the distance between images by changing the tcZDistance variable value. Only the JS file (main2.js) is changed in the first example where I just changed the value of the variable to 180 rather than 360. The default value used for tcItemInitialRotation is: 360/itemCount. I have changed the tcItemInitialRotation variable value, that you can set in the main.js file, that deals with image rotation (apart from CSS properties in the CSS file). This example is just a demonstration that how you can play with the methods or properties to change the distance or other elements as using this jQuery-CSS-Carousel plug-in. Modifying a variable value for changing the rotation angle This is followed by adding buttons code that are given tc-next and tc-prev classes.įinally, just before the tag, include the libraries of jQuery and main.js that also comes with the downloaded package. Use as many images as you want there enclosed between … tags, however, six will produce a better result. ![]() The images to be used for rotation are used inside the tags. Inside that, another div tag is used with id=”container” and tcc-rotation=”0″ attributes. See the demo online by clicking the links below:įor creating that rotating images carousel, first of all, include the jQuery-CSS-Carousel.css file that comes with the package of the plug-in (download package link).Īfter that, a is created with an id = carousel. The images are visible as rotating and you have to click buttons to move those images. In this example, I have used a total six images that will move as you click on Next/Previous buttons. The plug-in is light-weight and only requires adding a few lines of code in your web page where you intend to use it.īefore explaining how to set up this image rotator, have a look at a few demos online b y using this plug-in. In this tutorial, I am going to show how you can use a simple jQuery plug-in that acts as carousel and image rotator.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |