Testimonial slideshow based on slick.
To do: navigation on small devices
A Pen by Beibit Sakhanov on CodePen.
Created
January 30, 2019 12:53
-
-
Save bsakhanov/b8d5ab8ea8a25672405a447bec0adcba to your computer and use it in GitHub Desktop.
Testimonial slideshow
This file contains hidden or 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
| <div class="container"> | |
| <div class="slideset"> | |
| <div> | |
| <figure class="testimonial"> | |
| <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | |
| <div class="arrow"></div> | |
| </blockquote> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1138174/profile/profile-512.jpg" alt="Maksim Goffin" /> | |
| <div class="author"> | |
| <h5>Maksim Goffin</h5> | |
| <p class="th-margin-remove">Graphic Designer</p> | |
| </div> | |
| </figure> | |
| </div> | |
| <div> | |
| <figure class="testimonial"> | |
| <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | |
| <div class="arrow"></div> | |
| </blockquote> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1138174/profile/profile-512.jpg" alt="Maksim Goffin" /> | |
| <div class="author"> | |
| <h5>Maksim Goffin</h5> | |
| <p class="th-margin-remove">Graphic Designer</p> | |
| </div> | |
| </figure> | |
| </div> | |
| <div> | |
| <figure class="testimonial"> | |
| <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | |
| <div class="arrow"></div> | |
| </blockquote> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1138174/profile/profile-512.jpg" alt="Maksim Goffin" /> | |
| <div class="author"> | |
| <h5>Maksim Goffin</h5> | |
| <p class="th-margin-remove">Graphic Designer</p> | |
| </div> | |
| </figure> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or 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).ready(function () { | |
| $('.slideset').slick({ | |
| slidesToShow: 2, | |
| slidesToScroll: 1, | |
| responsive: [{ | |
| breakpoint: 850, | |
| settings: { | |
| slidesToShow: 1, | |
| slidesToScroll: 1, | |
| infinite: true, | |
| } | |
| }] | |
| }); | |
| }); |
This file contains hidden or 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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> |
This file contains hidden or 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
| @import url(https://fonts.googleapis.com/css?family=Open+Sans|Varela+Round); | |
| html { | |
| font-family: "Open Sans", sans-serif; | |
| font-size: 16px; | |
| font-weight: 400; | |
| line-height: 1.5; | |
| -webkit-text-size-adjust: 100%; | |
| -ms-text-size-adjust: 100%; | |
| background: #fff; | |
| color: #333 | |
| } | |
| body { | |
| margin: 0; | |
| background: #00c88a; | |
| } | |
| h5 { | |
| font-family: "Varela Round", sans-serif; | |
| font-weight: 400; | |
| font-size: 1.4em; | |
| line-height: 1.4em; | |
| color: #fff | |
| } | |
| .container { | |
| box-sizing: content-box; | |
| max-width: 1000px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: 15px; | |
| padding-right: 15px; | |
| padding-top: 40px; | |
| padding-bottom: 40px; | |
| } | |
| .th-margin-remove { | |
| margin: 0!important | |
| } | |
| figure.testimonial { | |
| position: relative; | |
| float: left; | |
| overflow: hidden; | |
| margin: 10px 1%; | |
| padding: 0 20px; | |
| text-align: left; | |
| box-shadow: none !important; | |
| } | |
| figure.testimonial * { | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9); | |
| transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9); | |
| } | |
| figure.testimonial img { | |
| max-width: 100%; | |
| vertical-align: middle; | |
| height: 90px; | |
| width: 90px; | |
| border-radius: 50%; | |
| margin: 40px 0 0 10px; | |
| } | |
| figure.testimonial blockquote { | |
| background-color: #fff; | |
| display: block; | |
| font-size: 16px; | |
| font-weight: 400; | |
| line-height: 1.5em; | |
| margin: 0; | |
| padding: 25px 50px 30px; | |
| position: relative; | |
| } | |
| figure.testimonial blockquote:before, figure.testimonial blockquote:after { | |
| content: "\201C"; | |
| position: absolute; | |
| color: #2b00f7; | |
| font-size: 50px; | |
| font-style: normal; | |
| } | |
| figure.testimonial blockquote:before { | |
| top: 25px; | |
| left: 20px; | |
| } | |
| figure.testimonial blockquote:after { | |
| content: "\201D"; | |
| right: 20px; | |
| bottom: 0; | |
| } | |
| figure.testimonial .arrow { | |
| top: 100%; | |
| width: 0; | |
| height: 0; | |
| border-left: 0 solid transparent; | |
| border-right: 25px solid transparent; | |
| border-top: 25px solid #fff; | |
| margin: 0; | |
| position: absolute; | |
| } | |
| figure.testimonial .author { | |
| position: absolute; | |
| bottom: 45px; | |
| padding: 0 10px 0 120px; | |
| margin: 0; | |
| color: #ffffff; | |
| -webkit-transform: translateY(50%); | |
| transform: translateY(50%); | |
| } | |
| figure.testimonial .author h5 { | |
| opacity: 0.9; | |
| margin: 0; | |
| } | |
| figure.testimonial .author h5 span { | |
| font-weight: 400; | |
| text-transform: none; | |
| padding-left: 5px; | |
| } | |
| /* Slider */ | |
| .slick-slider { | |
| position: relative; | |
| display: block; | |
| box-sizing: border-box; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| -webkit-touch-callout: none; | |
| -khtml-user-select: none; | |
| -ms-touch-action: pan-y; | |
| touch-action: pan-y; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| .slick-list { | |
| position: relative; | |
| display: block; | |
| overflow: hidden; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .slick-list:focus { | |
| outline: none; | |
| } | |
| .slick-list.dragging { | |
| cursor: pointer; | |
| cursor: hand; | |
| } | |
| .slick-slider .slick-track, .slick-slider .slick-list { | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| -ms-transform: translate3d(0, 0, 0); | |
| -o-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .slick-track { | |
| position: relative; | |
| top: 0; | |
| left: 0; | |
| display: block; | |
| } | |
| .slick-track:before, .slick-track:after { | |
| display: table; | |
| content: ''; | |
| } | |
| .slick-track:after { | |
| clear: both; | |
| } | |
| .slick-loading .slick-track { | |
| visibility: hidden; | |
| } | |
| .slick-slide { | |
| display: none; | |
| float: left; | |
| height: 100%; | |
| min-height: 1px; | |
| } | |
| .slick-slide img { | |
| display: block; | |
| } | |
| .slick-slide.slick-loading img { | |
| display: none; | |
| } | |
| .slick-slide.dragging img { | |
| pointer-events: none; | |
| } | |
| .slick-initialized .slick-slide { | |
| display: block; | |
| } | |
| .slick-loading .slick-slide { | |
| visibility: hidden; | |
| } | |
| .slick-vertical .slick-slide { | |
| display: block; | |
| height: auto; | |
| border: 1px solid transparent; | |
| } | |
| .slick-arrow.slick-hidden { | |
| display: none; | |
| } | |
| /* Arrows */ | |
| .slick-prev, .slick-next { | |
| font-size: 0; | |
| line-height: 0; | |
| position: absolute; | |
| top: 50%; | |
| display: block; | |
| width: 20px; | |
| height: 20px; | |
| padding: 0; | |
| -webkit-transform: translate(0, -50%); | |
| -ms-transform: translate(0, -50%); | |
| transform: translate(0, -50%); | |
| cursor: pointer; | |
| color: transparent; | |
| border: none; | |
| outline: none; | |
| background: transparent; | |
| } | |
| .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { | |
| color: transparent; | |
| outline: none; | |
| background: transparent; | |
| } | |
| .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { | |
| opacity: 1; | |
| } | |
| .slick-prev:before, .slick-next:before { | |
| font-family: "FontAwesome"; | |
| font-size: 20px; | |
| line-height: 1; | |
| opacity: .75; | |
| color: white; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .slick-prev { | |
| left: -40px; | |
| } | |
| .slick-prev:before { | |
| content: ""; | |
| } | |
| .slick-next { | |
| right: -40px; | |
| } | |
| .slick-next:before { | |
| content: ""; | |
| } |
This file contains hidden or 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
| <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment