Romych: /* 3D Overflow Slider, 3D Carousel */

2021-10-27T08:00:33Z

3D Overflow Slider, 3D Carousel

Нова сторінка

== Библиотеки ==

* [https://tympanus.net/Development/ItemTransitions/index2.html Item Transition Inspiration | Demo 2: Full Width]
* [http://www.joelambert.co.uk/flux/ Flux Slider » Hardware accelerated image transitions using CSS3]

=== 3D Overflow Slider, 3D Carousel ===

{| class="wikitable sortable"
|-
! Название !! Описание !! Вес, kb<br><code>.min.js</code> !! Lazy Load !! Touch !! 3D !! Зависимости !! Стоимость
|-
| [https://owlcarousel2.github.io/OwlCarousel2/ Owl Carousel] || можно использовать совместно с [https://animate.style/ Animate.css] и [https://github.com/jquery/jquery-mousewheel jquery-mousewheel] || 44 || Yes || Yes || — || — || Free
|-
| [https://glidejs.com/ Glide] || A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. || 23 || Сторонними<br>библиотеками || Yes || [https://github.com/glidejs/glide/issues/285 Вручную] || — || Free
|-
| [https://nickpiscitelli.github.io/Glider.js/ Glider] || A blazingly fast, crazy small, fully responsive, mobile-friendly, dependency free, native scrolling list with paging controls! || 4 || Yes || Yes || Perspective View<br>(themeable CSS) || — || Free
|-
| [https://swiperjs.com/ Swiper] || The Most Modern Mobile Touch Slider || 139 || Yes || Yes || [https://swiperjs.com/demos/240-effect-coverflow.html Yes] || — || Free
|-
| [https://splidejs.com/ Splide] || Free, lightweight and powerful JavaScript slider. Активно обновляется || 29 || Yes || Yes || — || — || Free
|-
| [https://wlada.github.io/vue-carousel-3d/ Vue Carousel 3D] || 3D Carousel for Vue.js. Минималистичный, но очень ок стиль || 26 || — || Yes || Yes || Vue || Free
|-
| [https://www.webdesign-flash.ro/p/s3dcov/ Simple 3D Coverflow] || Самый красивый || 683 || Yes || Yes || Yes || — || 59$
|-
| [https://github.com/gs-shop/vue-slick-carousel vue-slick-carousel] || 🚥Vue Slick Carousel with True SSR Written for ⚡Faster || || Yes || Yes || — || Vue || Free
|-
| [https://github.com/ismail9k/vue3-carousel Vue 3 Carousel] || Modern lightweight Vue 3 carousel component. [https://ismail9k.github.io/vue3-carousel/examples.html Examples] || || || Yes || [https://ismail9k.github.io/vue3-carousel/examples.html#active-classes Active Classes] || Vue 3 || Free
|}

==== Glide ====

* https://glidejs.com/
* https://github.com/glidejs/glide

Codepen
* [https://codepen.io/jedrzejchalubek/pen/MwPBGd/ Coverflow carousel with Glide.js v2]
* [https://codepen.io/arevalolucianadg/details/MWgpZRR prueba GLIDE js]

==== Vue Carousel 3D ====

* https://wlada.github.io/vue-carousel-3d/

Codepen
* https://codepen.io/mayccoll/pen/GRgRxXa — пример с дополнительным transform

==== Splide ====

* https://splidejs.com/
* https://github.com/Splidejs/splide

Codepen
* [https://codepen.io/brandonleetran/pen/bGEKrEE SplideJS Carousel Demo]
* [https://codepen.io/uitlaber/pen/yLemaBY A Pen by uitlaber]

== Подборки слайдеров ==

* [https://coolcarousels.frebsite.nl/ CoolCarousels - Showcasing 72 cool jQuery carousel examples and tutorials]
* [https://nisnom.com/slajdery-dlya-sajta-html-css-i-javascript-jquery/ Регулярно обновляемая подборка слайдеров для сайта на jQuery (JS) html css]
* [https://freefrontend.com/css-sliders/ 89 CSS Sliders]
* [https://freshdesignweb.com/jquery-image-slider-slideshow/ 90+ Free Responsive jQuery Image Slider & Slideshow Download - freshDesignweb]

== Отдельные примеры слайдеров ==

* [http://workshop.rs/projects/jqfancytransitions/ jqFancyTransitions: jQuery Image Rotator Plugin]

* [https://tympanus.net/Development/Slicebox/index2.html Slicebox - 3D Image Slider]
* [https://tympanus.net/Tutorials/CSS3Lightbox/index.html CSS3 Lightbox]
* [https://codepen.io/jcoulterdesign/pen/ZpoZyx/ CSS Only Cupcake Slider with Sprinkles!]
* [https://codepen.io/mariosmaselli/pen/kkgGkd/ Exploring UI Animation #3]
* [https://codepen.io/mrspok407/pen/NRxBWa/ Clean Slider With Curved Background]
* [https://codepen.io/IanLunn/pen/qObKVR/ Sequence.js - Mono]
* [https://codepen.io/codewunder/pen/Bnspb/ Responsive GTA V Slider]
* [https://codepen.io/andylorimer/pen/meXadK/ Feature Slider]
* [https://tympanus.net/codrops/2014/11/21/perspective-mockup-slideshow/ Perspective Mockup Slideshow | Codrops]
* [https://tympanus.net/Development/DraggableDualViewSlideshow/ Draggable Dual-View Slideshow]
* [https://tympanus.net/Tutorials/TiltedContentSlideshow/ Tilted Content Slideshow]
* [https://tympanus.net/Development/MorphingDevices/# Morphing Devices]
* [https://tympanus.net/Development/CircleFlipSlideshow/ Flipping Circle Slideshow]
* [https://tympanus.net/Tutorials/ElasticSlideshow/ Elastic Image Slideshow with Thumbnail Preview]
* [https://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/ Fluid CSS3 Slideshow with Parallax Effect]
* [https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html Fullscreen Background Image Slideshow with CSS3]
* [https://tympanus.net/Tutorials/SlideshowJmpress/ Slideshow with jmpress.js]
* [https://tympanus.net/Tutorials/CSS3ImageAccordion/ Image Accordion with CSS3]
* [https://tympanus.net/Tutorials/VerticalShowcaseSlider/ Vertical Showcase Slider with jQuery and CSS Transitions]
* [https://tympanus.net/Tutorials/RotatingImageSlider/ Rotating Image Slider with jQuery & CSS3]
* [https://tympanus.net/Development/3DGallery/index.html 3D Gallery with CSS3 and jQuery]
* [https://tympanus.net/Development/FullscreenImageBlurEffect/index.html Fullscreen Image Blur Effect with HTML5]
* [https://tympanus.net/Development/ContentRotator/example1.html Content Rotator with jQuery]

=== Варианты для Гординского ===

* [https://tympanus.net/Tutorials/FourBoxes/index3.html Four Boxes Slideshow | Demo 3]
* [https://tympanus.net/Tutorials/CSS3SlidingImagePanels/index4.html Sliding Image Panels with CSS3]
* Горизонтальный эффект https://codepen.io/romych/pen/pMaBeW на основе http://workshop.rs/projects/coin-slider/

[[Категория:Дизайн]]
[[Категория:CSS]]

Slider - Історія редагувань

Romych: /* 3D Overflow Slider, 3D Carousel */