slick.js---fully functional slides example

-

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

Popular posts from this blog

Thoughts about Progressive Web App

-
Image
  Browser London On my way to step into a senior web developer, I find out the most important thing is thinking like a pro, which means optimization and proficiency are the priority not only the coding processing. I’ve gotten interested in the Progressive Web App which is created in 2015 by Google. And the idea of a PWA is invented by Steve Jobs in 2007. cleverTap When talking about App, you may relate the apps in Apple or Android app store. This is kind of in the middle between the web and a real full-size App. What are the good parts of PWA? Progressive:  A PWA works in most modern web browsers with the power of progressive enhancement principles. Connectivity Independent:  It can run offline, even in the absence of a stable internet connection it works smoothly due to service workers. App-like Experience:  Though they are not real apps they offer the same level of user experience as native mobile apps with app-like navigation and interactions. Responsive:  PWAs work on every device
Read more

how to slice the psd for web with photoshop CC——three ways

-
Image
First step to become a front-end web developer is mastering how to slice the psd file and convert it to html. Here is my summary about how to do that.  The application: Photoshop CC .  The psd file which I download from the Internet. You can download my example psd file from  https://pan.baidu.com/s/1mhEAzva Way1. It's the traditional way based on the basic function in PS called slice tool. Slice each part you want like this .gif Then ctrl+shift+s or store as web format.  change the slice into all user slice. My slice file is shown below.All the pictures are saved in the file images. Way2. more advanced function called Script. export to file...  open the object file to save pictures and type as PNG-24. Then click run.wait...You may wait a while depends on the psd content and size.  Then,my slice file is shown below. Way3. The most convenient way only supplied on Photoshop CC version.   Edit>>Preference. click the first . Then clic
Read more

Fancyapps — easily build overlay windows with carousel

-
Image
  I used to play around with these gallery boxes with old versions. Now the Fancybox is the 4th version with more functions, including plugins, events, options. They even provided how to use React easily demo. I remember when I was learning Javascript, the fancy project is building a carousel, it took some time and logical understanding, but it’s a good way to learn the logic JS though. But for now, I will be grasping the eyeball by this fancy Javascript library. Since it’s a fast-developing world, the result should be precise, accurate, and fast, right? Fanyapps includes  Fancybox, Carousel, and Panzoom . Fancybox is a flex gallery container, which is touch and mobile optimized with swipe, drag, and pinch-to-zoom gestures. Carousel is a display place with smooth animations and more functions inside. Panzoom is a customized zooming function. They combined smoothly and more functionally. Official site Playaround the demo here Step1: import the library with npm or using CDN I like CDN fo
Read more