CodemySite_Web development

  Use this JavaScript library to generate a lightbox with animated and responsive images. BaguetteBox is a JavaScript library, that generates a lightbox with animated and responsive images. And it also supports swipe gestures on touch-screen devices. Official site: GitHub - feimosi/baguetteBox.js: Simple and easy to use lightbox script written in pure JavaScript zap: Simple and easy to use lightbox script written in pure JavaScript - GitHub - feimosi/baguetteBox.js: Simple and… github.com How to use it? Step1: Install with npm, yarn, bower, or CDN npm install baguettebox.js --save yarn add baguettebox.js bower install baguettebox.js --save or, <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.2/baguetteBox.min.css "> <script src= https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.2/baguetteBox.min.js " async></script> Step2: HTML The content is inside the  gallery . Every image is in  <a> tag ...

Strip is a Lightbox that only partially covers the page. This is less intrusive and leaves room to interact with the page on larger screens while giving smaller mobile devices the classic Lightbox experience. Github Documents Step1: link latest  jQuery library Link strip.css and strip.js Step2: usage in HTML One image with caption and options selected. More options  here Multiple images for a group with captions. Loop images sliders. Step3: A little css dressing Quick Usage &commercial use free!  x

I've tried so many demos about slider with or without libraries. Here is other slider demos for reference: carousel with html,css and javascript css animation slider slick.js---fully functional slides example Rotating Slider jQuery Plugin Javascript Animated Frame Slideshow xSlider.js---automatic slider plugin with jQuery View Switcher without JavaScript Css Slider Without JavaScript flexslider.js demo swiper.js demo---autoslider Auto Slider with Javascript

I used to write the carousel demo before: Auto slides with Javascript  Javascript animated frame slides And also some slides without Javascript: CSS slides without Javascript View switcher without Javascript CSS animation slider Also some slides with jQuery library: Slick.js  Rotating-slider.js Xslider.js flexSlider.js Swiper.js

Slider without Javascript. Learned from Online Tutorial Page here Github Download Step1: html There are five slide section among div classed slider. The container is the paragrapy outside the silder. Each slide gets some words content and an image as background showing. Step2: CSS  Google font imported. The slider takes 100%width with position. Each slide should be hidden with infinite animation named slider. 0%-5% transform visibility from hidden to visible,meanwhile the opacity 0 to 1. 5%-25% stay visible  25%-30% transform visibility and opacity  The style of image and content which is upper layer of image. The animation delay every four seconds for each slide. More CSS slider  examples: View swither without js  CSS slider without js

There are amount of slides plugins nowadays,such as flexslider.js ( the article here ) which is easy and bundle. And anther kind of slides are based on pure javascript ,such as this animated framed slideshow(the article here ). Slick is fully responsive and functional slide plugin which is also friendly to mobile touch.And it has a Wordpress version. Try below Step1: link the slick.css and slick-theme.css if you need link the script file slick.js and don't forget to insert the jquery first Step2: Html I put eight images within the slide section.. Step3: css Step4: js initialize the slick plugin. More setting,events and methods check document here The demo github here

A rotating slider with controls use circle ckip-path.   Note, because Internet Explorer/Edge do not support the Clip-path property, this will not work in those browsers. github here step1: link rotating-slider.css , jquery and rotating-slider.js step2: html html Build the DOM : .rotating-slider>ul.slides>li>.inner step3: css Give 6 slides different colors or backgrounds. step4: jq Select the rotating-slider and apply the roatingSlider plugin. Set the attribute such as height, width and speed and so on. The default attributes below,change as you wish. $('.rotating-slider').rotatingSlider({ autoRotate: true, autoRotateInterval: 6000, draggable: true, directionControls: true, directionLeftText: '&lsaquo;', directionRightText: '&rsaquo;', rotationSpeed: 750, slideHeight: 360, slideWidth: 480, /* Callback Functions */ beforeRotationStart: function(){}, afterRotati...

An experimental slideshow that shows an animated SVG frame when transitioning between slides. Author Mary Lou Github here I tried the first demo here, and more demos please check github Step1: link anime.js and imagesloaded. (when you need loading styles) Step2: html Inside the sildeshow, there are slides and slidenav html Inside the slides, there are four slide div with detail info. html Step3: css complete css ,please check codepen. The most important css is shape class name styles. css Step4: js js slides and shape have different durations,and frameFill is color white. css initialize the DOM variables. css The function creats frame with svg and set attributes. update frame when resize. with anime.js, the slides eases smoothly. More anime.js document here See the Pen Animated SVG Frame Slideshow by Yifang Di ( @diyifang ) on CodePen .

xSlider.js is a tiny jquuery slide plugin which is simple and quick and friendly apply to ie8. GitHub here Step1: link jquery and xSlider.js         <script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/xSlider.js"></script> And css file <link rel="stylesheet" href="css/main.css"> Step2: html HTML should be in the div named slider>slider-img>slider-img-ul>li... In the demo,it has five images, so here the list items should be two more :before first one and last one to expend the images gallery. css css CSS main styling code: .slider {      width : 1200px ;      margin : 50px auto ;      position : relative ; } .slider:hover .slider-btn {      color : #fff ;      text-shadow : 0 0 5px #666 ; } .slider .slider-img {      width...