A free jQuery slideshow by Pixedelic. A simple slide This is the "simple anathomy" of a slide: Captions You can add a caption to the slide, just put a div with class "camera_caption" into the div above: <div data-src="images/image_1.jpg"><div class="camera_caption">The text of your caption</div></div> By adding one more class to the "camera_caption" div you can decide the effect of the caption.
HTML elements You can also put some HTML elements into your slides. <div data-src="images/image_1.jpg"><div class="fadeIn camera_effected">The text of your html element</div></div> An HTML element can have a class "fadeIn": in this case it will be displayed with a fading effect. Videos To include a video into your slideshow you must put an iframe into one of your slides: As you can see I set the width and the height of the iframe to 100%, so it changes its size according with the size of the slideshows (I mean the iframe, the video in the iframe will mantain its ratio).
The "data-" attributes or a particular alignment for one slide only: Useful and Creative jQuery Image Sliders Tutorials. jQuery is the most popular framework used by most of the web designers and developers. jQuery library is an effective tool that enables them to do the code work effectively and is specially designed for animating, event handling, Ajax transactions and HTML document traversing for a fast web development. jQuery image slider has gained significant popularity in the website designing field in the recent years. jQuery is an important skill that should be preferably acquired by the web designers.
With various navigational tools and applications, there are numerous tutorials available online on this subject. The online tutorials offer step by step instructions about the coding and these learning materials can be very useful in producing a functional interface. Slideshow presentation has become quite popular among students, resource speakers and businessmen to present new reports, investigations and ideas. Some of the best jQuery image sliders are: Free jQuery Image Sliders Tutorials Diapo. Parallax Content Slider with CSS3 and jQuery.
A simple parallax content slider with different animations for each slider element and a background parallax effect.
View demo Download source Today we want to share a simple parallax content slider with you. Using CSS animations, we’ll control the animation of each single element in the slider and create a parallax effect by animating the background of the slider itself. The idea for this comes from the slider of the Kendo UI homepage, a framework for modern HTML UI. After we got some requests and questions about how to do something like that, we decided to recreate the effect. How it works The slider contains several slides and each one will have an h2 element, a paragraph, a link and a division with an image: The core of this slider is the animations for each one of the elements. .da-slide-fromright.da-slide-fromleft.da-slide-toright.da-slide-toleft Given these classes, we can control the animation of each element: Options The following options are available when calling the cslider plugin: