Site icon Vavik96

Крутые слайдеры на чистом CSS без использования jQuery/Javascript

Я очень люблю слайдеры изображений или текста, с использованием чистого CSS. Точно так же, я всегда ненавидел медленные слайдеры, использующие JQuery или JavaScript, при использовании в своих WordPress темах или HTML веб-сайтах. Я подобрал несколько интересные CSS слайдеров из codepen / GitHub и других сайтов, для использования в веб-сайт или в темах. Внимание: Пожалуйста, убедитесь, что слайдеры работают в Safari, Chrome и FF перед использованием в ваших проектах.

CSS3 Multi Animation Slider

Слайдер с несколькими анимациями для изображений с описаниями.

http://codepen.io/Eliteware/full/BoBgqV/

CSS Juizy Slideshow

Слайдшоу с использованием CSS and html

http://www.creativejuiz.fr/trytotry/juizy-slideshow-full-css3-html5/

CSS Featured Image slider

Симпатичный слайдер с использованием только css.






https://codepen.io/joshnh/full/KwilB/

CSS Image slider

http://codepen.io/AMKohn/details/EKJHf

CSS3 Thumbnail Slider

Сладер на чистом CSS с миниатюрами.

thecodeplayer.com

HTML5 CSS Driven Slider

Простой html5/css слайдер.

http://codepen.io/dudleystorey/full/kFoGw/

CSS Accordian slider

iAuto является классным аккордионом на css и html.

http://codepen.io/JFarrow/full/iAuto/

Responsive no javascript CSS3 Slider

Адаптивный слайдер с подписями. Без javascript

http://csscience.com/responsiveslidercss3/

CSS3 Clickable Slider

Простой управляемый слайдер с кнопками “вперёд” и “назад”.

http://codepen.io/johnmotyljr/full/cDpEH/

Gallery CSS slider

http://benschwarz.github.io/gallery-css/

KeyFrames Slider

Слайдер бэкграунда с использованием css кейфреймов.

https://github.com/stephenscaff/keyframes-slider

CSS Slider

Слайдер на чистом css (без JS, без jquery)

http://codepen.io/drygiel/full/rtpnE/

CSS Slider

Профессионально сделанный слайдер имеющий более 20 стилей и кнопок.

http://cssslider.com

Elegant Responsive CSS slider

http://codepen.io/rizky_k_r/full/shmwC/

Pure CSS slider content

https://codepen.io/johnlouie04/full/BqyGb/

Responsive CSS3 Slider

Простой слайдер на html и css3 с подписями.

http://dreyacosta.github.io/pure-responsive-css3-slider/

CSS3 slider without Javascript

Слайдер на чистом css3 с хлебными крошками в виде подписей.

http://codeconvey.com/Tutorials/cssSlider/

Pure CSS slider

Очень простой слайдер изображений.

http://codepen.io/ClearDesign/full/KpQEyv

CSS Sliding Checkboxes

Кнопки на чистом css с эффектом слайдера.

http://tstachl.github.io/slidr.css/

Pure CSS3 Cycle Slider

Слайдер с индикатором загрузки.

http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/

CSS Accordian Slider

Создайте сами аккордеон с использованием только css и html (без javascript).

http://accordionslider.com/

Pure CSS Slides

https://github.com/littleli/PureCssSlides

CSS3 Image Collapse

http://anroots.github.io/css3-image-collapse/

PureCSS Image comparison Slider

http://lea.verou.me/2014/07/image-comparison-slider-with-pure-css/

 

Использованы материалы сайта corpocrat.com

Exit mobile version