Jquery carousel na may awtomatikong pag-scroll. Paano gumawa ng carousel gamit lang ang HTML at CSS. Carousel gamit ang bootstrap

Mabuti. Sa artikulong ito nagbabahagi ako ng isang mahusay na magaan na slider/carousel sa jQuery. May 3D effect ang carousel kapag nag-i-scroll sa mga larawan. Ang gitnang larawan ay may normal na laki, at kung mas malayo ang larawan ay mula sa gitna, mas maliit ito sa laki at may higit na transparency.

Ang carousel ay hindi naka-istilo sa anumang paraan, ngunit hindi mo kailangang tanggalin ang hindi kinakailangang css, madali mong maidagdag ang iyong sariling mga estilo. Ang pag-install ng slider ay napakadali din.

Pag-install ng jQuery carousel sa isang website 1. I-download ang archive

Una kailangan mong i-download ang archive at i-unzip ang mga file

2. I-upload ang mga kinakailangang file sa server

Ngayon ay kailangan mong idagdag ang mga imahe at js folder sa ugat ng iyong site. Kung mayroon nang ganitong mga folder, ilipat ang mga file na nasa mga ito sa mga folder na ito.

3. Ikonekta ang mga script

Kasama namin ang jquery library

at isang script na responsable para sa pagpapatakbo ng carousel

pati na rin ang mga setting ng script

$(document).ready(function () ( var carousel = $("#carousel").waterwheelCarousel(( flankingItems: 3, movingToCenter: function ($item) ($("#callback-output").prepend(" movingToCenter: " + $item.attr("id") + "
"); ), movedToCenter: function ($item) ($("#callback-output").prepend("movedToCenter: " + $item.attr("id") + "
"); ), movingFromCenter: function ($item) ($("#callback-output").prepend("movingFromCenter: " + $item.attr("id") + "
"); ), movedFromCenter: function ($item) ($("#callback-output").prepend("movedFromCenter: " + $item.attr("id") + "
"); ), clickedCenter: function ($item) ($("#callback-output").prepend("clickedCenter: " + $item.attr("id") + "
"); ) )); $("#prev").bind("click", function () ( carousel.prev(); return false )); $("#next").bind("click", function () ( carousel.next(); return false; )); $("#reload").bind("click", function () ( newOptions = eval("(" + $("#newoptions"). val() + ")"); carousel.reload(newOptions return false ));

Natural naming ipasok ang lahat ng ito sa tag

4. Mga istilo ng pagkonekta

Kailangan mo ring tukuyin ang mga istilo na malamang na baguhin mo, ngunit kailangan ang mga ito para sa pangunahing pagpapakita ng carousel. Nandito na sila:

Body ( font-family:Arial; font-size:12px; background:#ededed; ) .example-desc ( margin:3px 0; padding:5px; ) #carousel ( width:960px; margin: 60px auto; border:1px solid #222; height:300px; clear:both; background:#FFF ) #carousel img ( visibility:hidden; /* hide images hanggang carousel can handle them */ cursor:pointer; * otherwise it"s not as obvious item can i-click */ .split-left ( width:450px; float:left; ) .split-right ( width:400px; float:left; margin-left:10px; ) # callback-output ( height:250px; overflow:scroll ; ) textarea#newoptions ( width:430px; ) .nav ( width: 80px; margin: 20px auto )

I-paste ang mga istilo sa isang umiiral nang css file, o direkta sa , na binabalot ang mga ito

5. Ipasok ang html code ng carousel

Well, ang huling hakbang: i-paste ang html code ng carousel kung saan namin ito gustong makita.

Nakaraan | Susunod

Ang jQuery 3D carousel ay konektado at kung ginawa mo ang lahat ng tama, gagana ito. Kung hindi ito mangyayari, kailangan mong suriin ang lahat ng mga path sa js script at posibleng mga salungatan sa script. paalam sa lahat

Ang isa sa mga epektibong paraan upang maakit ang atensyon ng mga gumagamit sa isang pahina ng website ay ang paglikha ng gumagalaw na animation. Nakakatulong ang mga elemento ng animation na mas malinaw na sabihin at ipakita sa mga user ang tungkol sa iyong produkto. Kamakailan, ang mga sliding panel ay naging napakapopular, pati na rin ang ilang iba pang mga epekto na lumilitaw kapag nag-i-scroll o nag-click sa isang larawan. Kilala rin ang mga ito bilang mga slider, carousel at pop-up panel. Sa artikulong ito ay pag-uusapan natin ang tungkol sa paglikha ng adaptive carousel slider na may maayos na auto-scrolling effect.

Ngayon, may daan-daang mga review sa Internet na may mga link sa mga handa na solusyon, ngunit karamihan sa mga ito ay naglalaman ng maraming hindi nagamit na mga pag-andar na makabuluhang bawasan ang pagganap ng slider, pati na rin nagpapabagal sa pag-load ng site sa kabuuan. Ang mga propesyonal na web developer ay palaging nagsusumikap na lumikha ng mga produkto ng software na flexible sa pagsasaayos, na may mababang hadlang sa pagpasok para sa mga karagdagang library at plugin. Iyon ang dahilan kung bakit ginagamit ng aming script ang mga minimum na kinakailangan para sa pag-aayos ng naturang slider. Pinapayagan ka ng pag-andar na itakda ang pagitan ng paglipat, bilis, pati na rin ang pagpili ng isang partikular na slide. Nasa ibaba ang isang bilang ng mga variable na kumokontrol sa pagpapatakbo ng slider mismo.

timeList - bilis ng paglipat ng slide

TimeView - oras ng pagpapakita

RadioBut - mga pindutan sa ilalim ng slide para sa mabilis na pag-navigate. Ang default na halaga ay totoo, kung gumamit ka ng false ang mga pindutan ay mawawala.

Ngayon magsimula tayo! Gumawa tayo at buksan ang file na index.htm

Tulad ng nakikita natin, walang kumplikado sa ipinakita na code na tinutukoy ng slider-wrap ang pangkalahatang posisyon at inihanay ang slider sa gitna ng screen. Itinatakda ng active-slide na parameter ang laki at taas ng imahe ayon sa haba nito. At ipinapakita lamang ng slider ang aktibong larawan.

Ngayon gawin natin at buksan ang style.css file at idagdag ang markup na kailangan natin doon:

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); body ( color: #4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; padding: 0; margin: 0; ) #slider-wrap( max-width:800px; margin: 0 auto; margin-top: 80px; ) #active-slide ( width: 100%; display: table; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms- user-select: none; -o-user-select: none; padding: 0; -webkit-transition: 1s; -webkit-transition-timing-function: ease-in -transition-timing-function: ease-in-out; ); list-style: none; display: inline; float: left; .slide img (width: 100%; ) ctrl-select ( margin:2px; display:inline-block; width:16px; height:16px; overflow :hidden; text-indent:-9999px; background:url(radioBg.png) center bottom no-repeat; ) .Radio-But .ctrl-select:hover ( cursor:pointer; background-position:center center; ) .Radio-But .ctrl-select.active ( background-position:center top; ) #prewbutton, #nextbutton ( display :block; taas:100%; overflow:hidden; nextbutton ( right:10px; background:url(arrowBg.png) right center no-repeat; ) #prewbutton:hover, # nextbutton:hover ( opacity:1; )

Sa slider-wrap style property, ilagay ang lapad – ang maximum na haba ng iyong mga larawan.

Sa #slider ( width: calc(100% * 4); ) at .slide ( width: calc(100%/4); ) style properties, tukuyin ang bilang ng mga larawan sa iyong slider. Sa aming halimbawa mayroong 4 sa kanila.

Kung ang pasulong/paatras na mga arrow ay nakakasagabal sa visibility ng iyong slider, maaari silang gawing invisible at lilitaw ang mga ito kapag nag-hover ka sa mga ito. Upang gawin ito, sa prewBut at nextBut na mga parameter, itakda ang opacity property sa 0.

Ngayon, gumawa at buksan natin ang aming slider.js file, na maglalaman ng slider code. Huwag kalimutang isama ang jQuery library.

$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").haba; var animSlide = function(arrow)( clearTimeout(slideTime); if(arrow == "susunod")( if(slideNum == slideCount) ( slideNum=1; ) else(slideNum++) translateWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translateWidth = -$("#active-slide").width() * (slideNum - 1); $(" # slider").css(("transform": "translate(" + translateWidth + "px, 0)")); )else( slideNum = arrow; translateWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)") $(".ctrl-select.active"). removeClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active") if(RadioBut)( var $linkArrow = $("") .prependTo ("#active" -slide"); $("#nextbutton").click(function())( animSlide("next"); return false; )) $("#prewbutton").click(function())( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").bawat(function(index) ( adderSpan += "" + index + ""; )); $("" + adderSpan +"").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum + 1); )); var pause = false; var rotator = function())( if(!pause)(slideTime = setTimeout(function())(animSlide("next")), TimeView);) ) $("#slider-wrap").hover(function( ))( clearTimeout(slideTime); pause = true;), function()(pause = false; rotator(); )); var clicking = false; var prevX; $(".slide").mousedown(function(e)( clicking = true; prevX = e.clientX; )); $(".slide").mouseup(function() ( pag-click = false; )); $(dokumento).mouseup(function())( pag-click = false; )); $(".slide").mousemove(function(e)( if(clicking == true) ( ​​​​if(e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) ( animSlide("prew"); clearTimeout(slideTime); ) pag-click = false; ))); $(".slide").hover().css("cursor", "pointer"); rotator(); ));

Ang animSlide function ay tumatanggap ng tatlong uri ng mga value: next, prew, numeric value. Pinapalitan ng susunod na parameter ang susunod na slide, ibinabalik ng prew ang nauna, at ang numeric na halaga ay ang partikular na slide na pinili sa pamamagitan ng radio button sa ibaba ng slide.

Ang ipinakitang slider ay gumamit ng mga larawan mula sa web resource https://pixabay.com/.

Binibigyang-daan ka ng mga jQuery carousel plugin na magpakita ng nilalaman ng website sa mas kaakit-akit na paraan. Sa tulong ng naturang mga plugin, maaari kang lumikha ng magagandang presentasyon nang direkta sa mga pahina ng website at maakit ang atensyon ng mga bisita.

1. Bootstrap Ambilight Slider

Ang Bootstrap Ambilight Slider ay isang plugin para sa paglikha ng mga slider/carousel na may ambient glow effect at Bootstrap functionality.

2. jQuery TouchSwipe Carousel

Ang TouchSwipe Carousel jQuery plugin ay nagbibigay-daan sa iyo na makakita ng mga touch sa touch screen at gayahin ang isang mouse key press.

3.ItemSlide

Ang ItemSlide.js ay isang jquery plugin para sa paggawa ng carousel na gagana sa parehong mga desktop PC at mobile touch device.

4.

– jquery plugin para sa paglikha ng adaptive carousels/slider.

5.

Ganap na tumutugon at mobile-optimized jquery carousel plugin. Para sa animation, ginagamit dito ang mga transition ng CSS3, ngunit mayroon ding fallback na opsyon sa jQuery. Sinusuportahan ng plugin ang isang walang limitasyong bilang ng mga slide na may anumang uri ng nilalaman. ay maaaring makipag-ugnayan sa keyboard, at sa parehong oras ay gumagana nang maayos sa karamihan ng mga browser, kabilang ang mga mobile.

6. SilverTrack

Ang SilverTrack ay isang extensible jQuery plugin. Binubuo ito ng isang maliit na core kung saan maaari mong ikonekta ang mga maginhawang plugin.

7. Owl Carousel 2

Ang Owl Carousel 2 ay isang ganap na tumutugon na jQuery/Zepto carousel na may suporta sa touch screen.

8. UtilCarousel

Ang UtilCarousel ay isang jQuery carousel plugin na may maayos na mga transition na ipinatupad sa pamamagitan ng hardware acceleration. Ito ay ganap na umaangkop. Ang plugin ay sumusuporta sa mga touch screen at gumagamit ng hardware-accelerated na 3D CSS3 animation. Salamat dito, magiging maganda ang hitsura ng plugin sa parehong mga desktop PC at mobile device. Makokontrol mo ang UtilCarousel gamit ang mga touch, navigation, o ang mouse wheel.

9. Makinis

Ang Slick ay isang tumutugon na jQuery carousel na mayroong lahat ng kailangan mo.

10. CodingJack 3D Carousel

Ang carousel na ito ay sinusuportahan ng mga iOS at Android device at nilagyan ng touch swipe functionality. Mukhang mahusay sa mga tablet at smartphone.

11. jQuery Slideshow

Ang jQuery Slideshow ay isang carousel at slider na may suporta sa galaw para sa mga touch device. Ang archive ng plugin ay tumitimbang lamang ng 2 kilobytes.

12. FlimRoll

Ang FlimRoll ay isang maliit na jQuery carousel na nakatutok sa atensyon ng user sa isang partikular na bagay, inilalagay ito sa gitna ng screen.

13. Tikslus

Ang Tikslus ay isang ganap na tumutugon na jQuery carousel na may maraming mga tampok at katangian. At ang mataas na kakayahang umangkop ng plugin ay nagbibigay-daan sa iyo na huwag tukuyin ang mga laki ng larawan. Bilang karagdagan, ito ay nagkakahalaga ng pagpuna sa suporta para sa mga pasadyang animation batay sa mga klase ng CSS3. Maaaring gamitin ang Tikslus sa Jquery Mobile plugin.

14. Scrollbox

Ang Scrollbox ay isang simple at maliit na jQuery plugin na ginagawang carousel o ticker ang mga listahan.

15. Sky Touch Carousel

Ang Sky Touch Carousel ay isang jQuery carousel plugin na may maraming hanay ng mga function. Ang plugin ay adaptive, sumusuporta sa mga touch screen, at sa parehong oras ay gumagana nang mabilis at maayos. Nagbibigay-daan sa iyo ang mga setting na baguhin ang hitsura ng carousel gamit ang CSS.

16.

– flexible jQuery plugin para sa paglikha ng mga slideshow o carousel. Mayroon itong maraming mga setting, kabilang ang mga uri ng paglipat, pagkakahanay ng imahe, at bilis ng paglipat ng frame.

1. jQuery carousel “clickCarousel”

I-block gamit ang pag-scroll ng mga anunsyo ng balita. Gamitin ang kaliwa/kanang mga arrow upang mag-scroll sa mga bloke. Naglalaman ang archive ng carousel sa dalawang istilo: liwanag at madilim.

1. jQuery carousel, plugin na “carouFredSel”

Isang malinis at sariwang larawan na carousel sa jQuery.

4. jQuery plugin: carousel "Elastislide" 5. Plugin "TinyCarousel"

Mahusay na mga slider ng nilalaman sa anyo ng isang carousel ng imahe gamit ang jQuery. Inilalarawan ng pahina ng demo kung paano i-attach ang carousel na ito sa iyong site.

Slider Kit plugin, isang magaan na carousel na may iba't ibang paraan ng pag-scroll.

7. javascript carousel 8. jQuery plugin “Grid Navigation Effects”

Orihinal na nabigasyon sa pagitan ng mga thumbnail ng larawan. Upang tingnan ang epekto sa kanang bahagi ng pahina ng demo, mag-click sa mga pindutang Pataas at Pababa. Nagbibigay din ang solusyon ng jQuery na ito ng hover effect sa thumbnail at pag-scroll gamit ang mouse wheel.

9. Easy carousel 10. Carousel na ginawa mula sa "Easy Paginate" na mga bloke

jQuery plugin "Easy Paginate". Ang bawat hugis-parihaba na bloke ay kumakatawan sa isang regular na li list item, at kung mayroong higit sa tatlong mga item, pagkatapos ay upang tingnan ang lahat ng mga ito kailangan mong gumamit ng slider-like navigation (gamit ang forward at back arrow at gamit ang navigation buttons sa ibaba).

11. Vertical Ticker rotator

Vertical rotator sa jQuery: awtomatikong pag-scroll ng nilalaman sa pahina. Ang mga pindutan ng nabigasyon ay ibinigay, pati na rin ang kakayahang ihinto ang pag-ikot at simulan itong muli. Kapag nag-hover ka sa cursor ng mouse, hihinto ang paggalaw. Sa antas ng HTML markup, ang mga scroll block ay kinakatawan ng mga ordinaryong li list item.

12. javascript CSS scrolling area

javascript solution na "TinyScroller" para gumawa ng scrolling area na inilagay sa isang DIV container.

13. jQuery plugin na “Smooth Div Scroll”

Plugin para sa pagpapatupad ng pahalang na pag-scroll ng nilalaman sa isang partikular na lugar. Kapag ini-hover mo ang iyong mouse sa kaliwa o kanang gilid ng lugar, magsisimula ang pag-scroll.

Ang pag-navigate sa pagitan ng mga slide ng nilalaman ay maaaring gawin gamit ang mga arrow o sa pamamagitan ng pag-click sa thumbnail. Sa ibaba ay mayroong button na "Ipakita" na nagbibigay-daan sa iyong itago/ipakita ang mga thumbnail o isang buong paglalarawan ng slide.

15. Content rotator "Circular Content Carousel" 17. Scroller

Isang block na may scroller na lalabas kapag nag-hover ka sa cursor. Maaari kang mag-scroll ng nilalaman gamit ang alinman sa scroll bar o ang mouse wheel.

Ang solusyon sa jQuery na ito ay inspirasyon ng katulad na epekto sa website ng Apple. Ang mga developer ng korporasyong ito ay palaging nakakahanap ng mga kawili-wiling solusyon na nagbigay inspirasyon sa mga webmaster mula sa buong mundo. Upang ipakita ang plugin, pumili ng kategorya mula sa listahan.

19. Kahanga-hangang Slider

Ang slider ay awtomatikong nabuo. Ang data na may pangalan ng produkto, paglalarawan, link at address ng larawan ay kinuha mula sa slider.db.txt file. Mga teknolohiyang ginamit: CSS, PHP, jQuery.

20. Umiikot na mga bloke gamit ang jQuery

Upang tingnan ang epekto ng pag-ikot ng block, mag-click sa isa sa mga maliliit na parihaba sa pahina ng demo

Ang isang plugin ng pag-scroll ng nilalaman, halimbawa, ay maaaring gamitin upang ipakita ang pinakabagong mga balita o upang ipakita ang mga flyer ng Twitter sa isang website.

22. Dynamic na block "Mga review ng customer"

Awtomatikong pag-ikot ng mga nilalaman ng block. Mga teknolohiyang ginamit: PHP, XML, CSS, jQuery.

Ang plugin na ito ay nagko-convert ng mga item sa listahan (ul li) sa mga elemento ng jQuery carousel.

26. javascript carousel "ImageFlow"

Madaling mag-scroll sa mga larawan gamit ang mouse wheel.

27. Pag-scroll ng nilalaman

Isang compact block na may anunsyo ng mga pinakabagong materyales sa site o balita. Ang kaliwang hanay ay nagpapakita ng isang paginated na listahan ng mga maikling anunsyo ng pinakabagong balita. Kapag pinili mo ang isa sa mga ito, ang isang mas detalyadong paglalarawan at isang link upang basahin ang buong teksto ng publikasyon ay ipinapakita sa kanang hanay. Ipinatupad gamit ang jQuery.

Ang mga larawang may mga link ay ini-scroll, kapag nag-hover ka ng mouse, ang pag-scroll ay hihinto at ang navigation bar ay lilitaw. Kapag nag-hover ka ng mouse sa isang larawan, ipinapakita rin ang pangalan nito sa pagitan ng mga control button. Mukhang napakaganda sa page

33. Pag-scroll ng nilalaman, plugin ng Mootools na "Scrollbar"

Ginagawa ang pag-scroll gamit ang parehong scroll bar at ang gulong ng mouse.

Ang Owl Carousel ay isang jQuery plugin na may touch support na nagbibigay-daan sa iyong lumikha ng tumutugon (adaptive) slider (carousel).
Ito ay isang napaka-maginhawa, simple at adaptive na plugin para sa paglikha ng mga slider, carousels, atbp.
Sa artikulong ito susubukan kong ipaliwanag at ipakita sa iyo kung paano ito gumagana.

Pag-install ng Owl Carousel plugin
Una kailangan nating i-download ang archive gamit ang plugin

Sa ibaba ay magpapakita ako ng isang halimbawa ng pag-install ng plugin sa template ng DataLife Engine.

Pagkatapos naming ma-download ang archive, buksan ito at ipamahagi ang mga file tulad ng sumusunod:
Ang file na owl.carousel.css at owl.transitions.css ay inilagay sa folder istilo kaya o css.
Ang file na owl.carousel.js ay inilagay sa js folder

Ngayon kailangan naming ikonekta ang mga file na ito upang gumana ang mga ito sa aming template.
Buksan ang file main.tpl at bago ang linya ipasok ang mga sumusunod na linya:
Baguhin ang css folder sa isa kung saan mayroon kang mga estilo ng css!
Pagkatapos sa pinakailalim bago ang linya ay ipinasok namin ang sumusunod na linya:
OK tapos na ang lahat Ngayon! Tapos na kami sa pag-install.

Ngayon kailangan nating ipasok at i-configure ang slider mismo.
Ipapakita ko sa iyo ang isang halimbawa topnews mga Ipapakita ko ang mga sikat na balita sa pamamagitan ng aming owl carousel.

Ang pahina ng dokumentasyon ay naglalarawan sa lahat ng mga opsyon, demo, at mga paraan upang gamitin ang aming Owl Carousel plugin.
Sundin ang link at piliin ang anumang slider na gusto mo.
Para sa atin topnews Pinili ko ang pinakaunang may pangalan Mga larawan. Sa tab na jаvascript, kopyahin ang mga linyang ito:
$(document).ready(function() ($("#owl-demo").owlCarousel(( autoPlay: 3000, item: 4, itemsDesktop: , itemsDesktopSmall: )); )); at ipasok ang mga ito sa main.tpl file bago ang linya

Pagkatapos ay sa tab na CSS kinopya namin ang mga linya:
#owl-demo .item( margin: 3px; ) #owl-demo .item img( display: block; width: 100%; height: auto; ) at ikonekta ang mga ito sa anumang css file alinman sa main.tpl file bago ang linya ngunit pagkatapos ng linya !
Ngayon ay i-parse namin ang aming HTML code at ikonekta ito sa topnews. Sa main.tpl file, ipinapasok namin ang tag (topnews) sa kinakailangang lugar, na nagpapakita naman ng listahan ng mga sikat na balita, ang hitsura nito ay maaaring i-customize sa topnews.tpl file, higit pa dito sa ibaba.
Ang aming tag code ay dapat magmukhang ganito:
(topnews) Well, ngayon na lang natin i-set up ang balita mismo.
Buksan ang file t opnews.tpl at ipasok sa pinakadulo simula:
sa pinakadulo isinasara namin ang katangian

Kung gumagamit ka ng isa sa aking mga template na may Bootstrap, pagkatapos bilang isang opsyon maaari mong gamitin ang mga sumusunod na linya sa topnews.tpl file:
(limitasyon ng pamagat="55")

(text limit="100")

Ang Read News ay ipapakita tulad nito

Maaaring gamitin ang plugin na ito halos kahit saan, gamit din ang tag (pasadyang kategorya)
Maaari din itong palitan ang karaniwang gallery ng DLE, maglalathala ako ng hiwalay na artikulo tungkol dito. Tangkilikin ito para sa iyong kalusugan;)

Magandang pagbati, admin. i-download Pansin: Naabot na ang limitasyon sa pag-download. punta ka bukas =)