Need help adding JS Slider

  • 13 September 2016
  • 6 replies
  • 183 views
B

I’m new to Unbounce and am having difficulty adding a slider for testimonials on my landing page. This is what I have done so far:

  1. Used drag and drop HTML widget and enter following code:
    script
    section class="regular slider"
    div
    img src=“img1.jpg”
    /div
    div
    img src=“img2.jpg”
    /div
    /section
    /script

  2. Added Javascript to the JS tab at bottom of interface:
    script
    (document).on('ready', function() { (".regular").slick({
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
    });
    });
    /script

  3. Adding CSS in bottom CSS panel:

html, body { margin: 0; padding: 0; } * { box-sizing: border-box; } .slider { width: 50%; margin: 100px auto; } .slick-slide { margin: 0px 20px; } .slick-slide img { width: 100%; } .slick-prev:before, .slick-next:before { color: black; }

ANY help would be greatly appreciated. I’m not sure if my failure is in the code or the placement of where the code lives within the Unbounce Editor.

6 replies

Hristian
Userlevel 7
Badge +3

Hi @bthomas,

The formatting of your question got broken a bit but based on what I was able to piece together:

You are trying to add Slick carousel to your Unbounce page.

A few things that stood out without seeing the live page:

  • You are initializing the script but you actually never load the actual JS
  • The CSS looks a bit short and odd
  • You can’t reference images just by a short URL like “img1.jpg” since they don’t reside in the same folder as your Unbounce page

If you share the actual page, the community here might be able to point you further but generally speaking adjusting scripts to work on an Unbounce page requires a bit of JS/CSS knowledge and experience working with the platform.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
Nishant_Dewan

Hi @bthomas,

I did a testimonial slider for my landing page few months back. Here’s the css script and the html code. You just need to do some basic customization to match colors, fonts etc with your landing page(s).

CSS:

<style>

.container {
	width:100%;
	margin:5px;
    height: 80%;
}


/* testimonials slider geometry */
.tsl {
	border:none;
	padding:1em;
}
.tsl-list {
	list-style-type:none;
	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
}
.tsl-item {
	position:relative;
	top:0;
	left:100%;
	margin-left:-100%;
	width:100%;
	float:left;
	animation: tsl-fade-in-out 25s infinite;
	animation-play-state:running;
}

/* lets hide all items from second */
.tsl-item + .tsl-item {
	opacity:0;
}

/* animation */

/* animation shift */
/* negative delay needed to pause works correctly on hover */
.tsl-item:nth-child(2) {
	animation-delay: -20s;
}
.tsl-item:nth-child(3) {
	animation-delay: -15s;
}
.tsl-item:nth-child(4) {
	animation-delay: -10s;
}
.tsl-item:nth-child(5) {
	animation-delay: -5s;
}
/*
we have 5 items.
we want each slide plays ≈5s

each slide will play 1/5 of animation = 20%
1% of animation is for transitions (fading)
*/

@keyframes tsl-fade-in-out {
	0% {
		opacity:0;
		z-index:2;
	}
	1% {
		opacity:1;
		z-index:2;
	}
	20% {
		opacity:1;
	}
	21% {
		opacity:0;
		z-index:1;
	}
	100% {
		opacity:0;
	}
}

/* pause on hover */
.tsl-list:hover .tsl-item {
	animation-play-state:paused;
}

/* testimonials theme */
.tsl-content {
	font: 16px/1.4 Ubuntu;
    color: white;
}
.tsl-content p {
	margin-top:0;
}
.tsl-meta {
	font: 14px/1.4 Ubuntu;
	text-align:right;
    color: white;
}
.tsl-meta p {
	margin-bottom:0;
  }
</style>

HTML:

<div class="container">
	
	<!-- testimonials begin -->
	<div class="tsl">
	  <ul class="tsl-list">
	    <li class="tsl-item">
	      <article class="tsl-content">
					<p align="justify">Testimonial 1</p>
				</article>
	      <aside class="tsl-meta">
					<p>Ronald of Orlando, CA<br>Original review posted on Dec. 31, 2015 </p>
				</aside>
	    </li>
	    <li class="tsl-item">
	      <article class="tsl-content">
					<p align="justify">Testimonial 2</p>
				</article>
	      <aside class="tsl-meta">
					<p>Kim of Bloomington, CA<br>Original review posted on Jan. 25, 2016</p>
				</aside>
	    </li>
	    <li class="tsl-item">
	      <article class="tsl-content">
					<p align="justify">Testimonial 3</p>
				</article>
	      <aside class="tsl-meta">
					<p>Kevin of Phoenix, AZ<br>Original review posted on Feb. 10, 2016</p>
				</aside>
	    </li>
	    <li class="tsl-item">
	      <article class="tsl-content">
					<p align="justify">Testimonial 4</p>
				</article>
	      <aside class="tsl-meta">
					<p>Angela of Fort Worth, TX<br>Original review posted on Feb. 9, 2016</p>
				</aside>
	    </li>
	    <li class="tsl-item">
	      <article class="tsl-content">
					<p align="justify">Testimonial 5</p>
				</article>
	      <aside class="tsl-meta">
            <p>Gabriel of Mesa, AZ<br>
            Original review posted on Feb. 4, 2016</p>
				</aside>
	    </li>
	  </ul>
	</div>
	<!-- testimonials end -->
	
</div>

And, if you want you can design a box around it using from within unbounce.

Let me know if you have any questions.

B

Nishant_Dewan, Thank you for this. I appreciate you taking the time to help me out here. When I enter the HTML in the Custom HTML Widget, the content appears but when I enter the CSS into the Stylesheets editor, nothing is appearing. Have you had this experience? Do I need to call the CSS from within the HTML editor? The visibility is on.

Again, thanks for your help.

Nishant_Dewan

@bthomas,

Make sure you customize the font color as per your landing page background image / color. I used it with white font, maybe that’s the reason its not showing up.

You need to make changes to the following part of the css code:

/* testimonials theme */
.tsl-content {
	font: 16px/1.4 Ubuntu;
color: white;
}
.tsl-content p {
	margin-top:0;
}
.tsl-meta {
	font: 14px/1.4 Ubuntu;
	text-align:right;
color: white;
}
.tsl-meta p {
	margin-bottom:0;
  }
M

I am stuck at slick sliders for hours now. I am getting a problem where my slick slide is leaving some 25px from the right side. that is it’s not taking the full width of the section which is 1280. Please help me in this regard. I want to have a full-width slider which will start from left extreme side to right extreme side.

    <div id="blog_slider">

<!-- Copy form this section  -->
<!-- slider section starts  -->
<div>
    <div class="slider_inner_block" style="background:url(https://image-service.unbounce.com/https%3A%2F%2Fapp.unbounce.com%2Fpublish%2Fassets%2Fa7b6b669-6b6e-46f0-8642-ed42d32899ed%2Fab050f22-slider-image_0e409e0010010o.jpg)">
            <div class="slider_content">
                    <h4> title</h4>
            </div>
            <a href="" class="link_alignment"></a>
    </div>
</div>
<!-- slider section ends  -->
<!-- Till here for slider  -->

<!-- slider section starts  -->
<div>
    <div class="slider_inner_block" style="background:url(https://image-service.unbounce.com/https%3A%2F%2Fapp.unbounce.com%2Fpublish%2Fassets%2F0750fa88-4591-4429-8904-c06f4e5ebdf9%2F1fd2e2ff-slider-image2_0er092001001000.jpg)">
            <div class="slider_content">
                    <h4> title</h4>
            </div>
            <a href="" class="link_alignment"></a>
    </div>
</div>
<!-- slider section ends  -->
<!-- Till here for slider  -->


<!-- Copy form this section  -->
<!-- slider section starts  -->
<div>
    <div class="slider_inner_block" style="background:url(https://image-service.unbounce.com/https%3A%2F%2Fapp.unbounce.com%2Fpublish%2Fassets%2F63c59a97-60c0-40ec-84c2-fe14d3047664%2Fb065d243-slider-image3_0ck09e00100100o.jpg)">
        <div class="slider_content">
                <h4> title </h4>
            </div>
            <a href="" class="link_alignment"></a>
    </div>
</div>
<!-- slider section ends  -->
<!-- Till here for slider  -->


<!-- Copy form this section  -->
<!-- slider section starts  -->
<div>

/**slick slider***/

.slick-next{
position: absolute;
right: 30px;
top: 45%;
z-index: -1;
}
.slick-prev{
position: absolute;
top: 45%;
left: 15px;
z-index: -1;
}
.zIndexHigh{
z-index: 9999;
}
.img-responsive{
display: block;
max-width: 100%;
height: auto;
width: 36px;
cursor: pointer;
}
.slick-prev, .slick-next {
width: 25px;
height: 40px;
background-color: transparent;
border: none;
}

.slider_inner_block{
height: 320px;
width: 94%;
}
.slider_content{
padding: 180px 25px 25px;
}
.slider_content h4{
font-family: ‘Gilroy-ExtraBold’ !important;
font-size: 28px;
line-height: 36px;
color: #fff;
font-weight: bold;

}
.link_alignment{
position: absolute;
height: 100%;
width: 100%;
top: 0;

}
.slider_inner_block{
position: relative;
}

button.slick-prev.pull-left.slick-arrow.zIndexHigh:before,button.slick-next.pull-right.slick-arrow:before{
display: none;
}

button.slick-next.pull-right.slick-arrow.zIndexHigh img {
position: absolute;
right: 21px;
top: 38px;
}

button.slick-prev.pull-left.slick-arrow.zIndexHigh img {
position: absolute;
left: 20px;
}

E

I was trying to show 10 reviews instead of 5, but I keep getting overlaps. I’ve increased the “nth-child(#)” to 10 and changed the time each slide will play from 1/5 of animation = 20% to 1/10 of animation = 10%. What changes would I need to make here to show 10 items?

Reply


Terms & ConditionsCookie settings