A Pen by trailertrash on CodePen.
Created
February 29, 2024 10:34
-
-
Save Rvdiaz012/09e6917a5b654827c15ec2b490ed7a9b to your computer and use it in GitHub Desktop.
lory slider
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <div class="slider js_ease ease"> | |
| <div class="frame featslidewrap"> | |
| <ul class="slides featslide" style="transition-duration: 0ms; transform: translate3d(-900px, 0px, 0px);"> | |
| <li class="js_slide"> | |
| <div class="featitemouter"> | |
| <div class="featitemwrap"> | |
| <img src="https://storage.googleapis.com/cmgweb/img/listings/13349607_01.jpg"> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="js_slide"> | |
| <div class="featitemouter"> | |
| <div class="featitemwrap"> | |
| <img src="https://storage.googleapis.com/cmgweb/img/listings/13330723_01.jpg"> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="js_slide"> | |
| <div class="featitemouter"> | |
| <div class="featitemwrap"> | |
| <img src="https://storage.googleapis.com/cmgweb/img/listings/13333030_01.jpg"> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="js_slide"> | |
| <div class="featitemouter"> | |
| <div class="featitemwrap"> | |
| <img src="https://storage.googleapis.com/cmgweb/img/listings/13222319_01.jpg"> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="js_slide"> | |
| <div class="featitemouter"> | |
| <div class="featitemwrap"> | |
| <img src="https://storage.googleapis.com/cmgweb/img/listings/13092890_01.jpg"> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <span class="featslideprev"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z"></path></g></svg> | |
| </span> | |
| <span class="featslidenext"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z"></path></g></svg> | |
| </span> | |
| </div> | |
| </body> | |
| <script src="https://storage.googleapis.com/cmgweb/script/lory.min.js"></script> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.addEventListener('DOMContentLoaded', function () { | |
| var ease = document.querySelector('.js_ease'); | |
| lory(ease, { | |
| infinite: 3, //default:false (# visible slides) | |
| slidesToScroll: 1, //default: 1 (slides scrolled at once) | |
| slideSpeed: 150, //default:300 | |
| rewindSpeed: 150, //default:600 | |
| snapBackSpeed: 150, //default: 200 | |
| ease: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)', | |
| enableMouseEvents: true, | |
| classNameFrame: 'featslidewrap', //default: 'js_frame' | |
| classNameSlideContainer: 'featslide', //default: 'js_slides' | |
| classNamePrevCtrl: 'featslideprev',//default: 'js_prev' | |
| classNameNextCtrl:'featslidenext', //default: 'js_next' | |
| }); | |
| }); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* *,:before,:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} */ | |
| /* * {margin:0;padding:0;border:0;background:none;-webkit-text-size-adjust:100%} */ | |
| .slider { | |
| position:relative; | |
| width:394px; | |
| margin:0 auto 40px; | |
| -webkit-user-select:none; | |
| -khtml-user-select:none; | |
| -moz-user-select:-moz-none; | |
| -o-user-select:none; | |
| user-select:none | |
| } | |
| .frame { | |
| position:relative; | |
| width:394px; | |
| margin:0 auto; | |
| font-size:0; | |
| line-height:0; | |
| overflow:hidden; | |
| white-space:nowrap | |
| } | |
| .frame li { | |
| position:relative; | |
| display:inline-block; | |
| height:258px; | |
| text-align:center; | |
| font-size:15px; | |
| line-height:30px; | |
| background:#2E435A; | |
| color:#fff | |
| } | |
| .slides {display:inline-block} | |
| .simple li,.rewind li,.events li {width:393px;margin-right:10px} | |
| .percentage .slides {display:block} | |
| .percentage .frame {width:87.452%} | |
| .percentage li {width:394px;} | |
| .variablewidth li {width:394px;margin-right:10px} | |
| .multipleelements li,.multislides li,.ease li {width:394px;margin-right:10px} | |
| .simple li:last-child,.rewind li:last-child,.events li:last-child,.variablewidth li:last-child,.multipleelements li:last-child,.multislides li:last-child,.ease li:last-child {margin-right:0} | |
| .featslideprev,.featslidenext { | |
| position:absolute; | |
| top:50%; | |
| margin-top:-25px; | |
| display:block; | |
| cursor:pointer | |
| } | |
| .featslidenext {right:0} | |
| .featslideprev {left:0} | |
| .featslidenext svg,.featslideprev svg {width:25px} | |
| /* @media screen and (min-width: 640px ) { | |
| .examplecode,.frame,.events_log {width:580px} | |
| .testscreen {width:500px} | |
| table {width:580px;margin:0 auto} | |
| tr {padding:0} | |
| .slider {width:100%;margin:0 auto 20px} | |
| .simple li,.rewind li,.events li {width:580px} | |
| .variablewidth li {width:394px;margin-right:10px} | |
| .multipleelements li,.multislides li,.ease li {width:130px;margin-right:20px} | |
| } */ | |
| .slider {width:980px;margin:0 auto 20px} | |
| .frame,.events_log {width:880px} | |
| .simple li,.rewind li,.events li {width:880px} | |
| .variablewidth li {width:394px;margin-right:15px} | |
| .multipleelements li,.multislides li,.ease li {width:394px;margin-right:15px} | |
| /* FEATURED IMAGE SIZING */ | |
| .featitemwrap {position: fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color: #808080;} | |
| .featitemwrap > img {position:absolute;top:0;left:0;width:100%;height:100%;max-height:258px;min-height:258px;} | |
| @media (min-aspect-ratio:16 / 9) {.featitemwrap > img {height:300%;top:-100%;}} | |
| @media (max-aspect-ratio:16 / 9) {.featitemwrap > img {width:300%;left:-100%;}} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment