i am using temp /flex with carousel thumbs.html Code is: 1. i want add smooth height for this slide and is it correct if i add like this: 2. if i add overlay on image is it correct if i add like this:

i see file an thank you. if i want add data lightbox it is correct do like this :

flex with carousel thumbs and smooth height

6 replies·opened Dec 4, 2017

web404Dec 4, 2017

i am using temp /flex-with-carousel-thumbs.html

Code is:

			`	&lt;div class="flexslider" id="flex-slider" &gt;
					&lt;div class="slider-wrap"&gt;
						&lt;div class="slide"&gt;&lt;img src="images/wedding/11.jpg" alt="Image"&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;img src="images/wedding/15.jpg" alt="Image"&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;img src="images/wedding/19.jpg" alt="Image"&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;img src="images/wedding/20.jpg" alt="Image"&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;img src="images/wedding/21.jpg" alt="Image"&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;img src="images/wedding/22.jpg" alt="Image"&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;img src="images/wedding/23.jpg" alt="Image"&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;img src="images/wedding/24.jpg" alt="Image"&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;img src="images/wedding/25.jpg" alt="Image"&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;img src="images/wedding/26.jpg" alt="Image"&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;img src="images/wedding/27.jpg" alt="Image"&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;img src="images/wedding/28.jpg" alt="Image"&gt;&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt; 

				&lt;div class="flexslider topmargin-sm" id="flex-slider-carousel" &gt;
					&lt;div class="slider-wrap"&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/11.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/15.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/19.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/20.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/21.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/22.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/23.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/24.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/25.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/26.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/27.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/28.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;`

i want add smooth height for this slide and is it correct if i add like this:

<!--  add code --> <div class="fslider"  data-animation="slide" data-smooth-height="true" data-pagi="false">   <!--  add code -->

					<div class="flexslider" id="flex-slider" >
						<div class="slider-wrap">
							<div class="slide"><img src="images/wedding/11.jpg" alt="Image"></div>
							<div class="slide"><img src="images/wedding/15.jpg" alt="Image"></div>
							<div class="slide"><img src="images/wedding/19.jpg" alt="Image"></div>
							<div class="slide"><img src="images/wedding/20.jpg" alt="Image"></div>
							<div class="slide"><img src="images/wedding/21.jpg" alt="Image"></div>
							<div class="slide"><img src="images/wedding/22.jpg" alt="Image"></div>
							<div class="slide"><img src="images/wedding/23.jpg" alt="Image"></div>
							<div class="slide"><img src="images/wedding/24.jpg" alt="Image"></div>
							<div class="slide"><img src="images/wedding/25.jpg" alt="Image"></div>
							<div class="slide"><img src="images/wedding/26.jpg" alt="Image"></div>
							<div class="slide"><img src="images/wedding/27.jpg" alt="Image"></div>
							<div class="slide"><img src="images/wedding/28.jpg" alt="Image"></div>
						</div>
					</div>

<!--  add code --> </div> <!--  add code -->

					<div class="flexslider topmargin-sm" id="flex-slider-carousel" >
						<div class="slider-wrap">
							<div class="slide"><a href="#"><img src="images/wedding/thumb/11.jpg" alt="Image"></a></div>
							<div class="slide"><a href="#"><img src="images/wedding/thumb/15.jpg" alt="Image"></a></div>
							<div class="slide"><a href="#"><img src="images/wedding/thumb/19.jpg" alt="Image"></a></div>
							<div class="slide"><a href="#"><img src="images/wedding/thumb/20.jpg" alt="Image"></a></div>
							<div class="slide"><a href="#"><img src="images/wedding/thumb/21.jpg" alt="Image"></a></div>
							<div class="slide"><a href="#"><img src="images/wedding/thumb/22.jpg" alt="Image"></a></div>
							<div class="slide"><a href="#"><img src="images/wedding/thumb/23.jpg" alt="Image"></a></div>
							<div class="slide"><a href="#"><img src="images/wedding/thumb/24.jpg" alt="Image"></a></div>
							<div class="slide"><a href="#"><img src="images/wedding/thumb/25.jpg" alt="Image"></a></div>
							<div class="slide"><a href="#"><img src="images/wedding/thumb/26.jpg" alt="Image"></a></div>
							<div class="slide"><a href="#"><img src="images/wedding/thumb/27.jpg" alt="Image"></a></div>
							<div class="slide"><a href="#"><img src="images/wedding/thumb/28.jpg" alt="Image"></a></div>
						</div>
					</div>

if i add overlay on image is it correct if i add like this:

  <div class="fslider"  data-animation="slide" data-smooth-height="true" data-pagi="false">   <!--  add code -->

					<div class="flexslider" id="flex-slider" >
						<div class="slider-wrap">
											<div class="slide">
												<a href="#">
													<img src="images/wedding/11.jpg" alt="">
													<div class="overlay">
														<div class="text-overlay">
															<div class="text-overlay-title">
																<h3>Locked Steel Gate</h3>
															</div>
															<div class="text-overlay-meta">
																<span>Illustrations</span>
															</div>
														</div>
													</div>
												</a>
											</div>
											<div class="slide">
												<a href="#">
													<img src="images/wedding/15.jpg" alt="">
													<div class="overlay">
														<div class="text-overlay">
															<div class="text-overlay-title">
																<h3>Locked Steel Gate</h3>
															</div>
															<div class="text-overlay-meta">
																<span>Illustrations</span>
															</div>
														</div>
													</div>
												</a>
											</div>
						</div>
					</div>

   </div> 

					<div class="flexslider topmargin-sm" id="flex-slider-carousel" >
						<div class="slider-wrap">
							<div class="slide"><a href="#"><img src="images/wedding/thumb/11.jpg" alt="Image"></a></div>
							<div class="slide"><a href="#"><img src="images/wedding/thumb/15.jpg" alt="Image"></a></div>
						</div>
					</div>

SemiColonWebSTAFFDec 4, 2017

Hello,

The normal slider options like data-animation="slide" and data-smooth-height="true" will not work since this is a custom made File and the Flex Slider is controlled by the JS at the bottom of the Page. So simply use this File we have created for you: https://www.dropbox.com/s/6a0bltobeu7kwfw/flex-with-carousel-thumbs.html?dl=1 .

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

web404Dec 8, 2017

i see file an thank you.

`			&lt;div class="flexslider" id="flex-slider"&gt;
					&lt;div class="slider-wrap"&gt;
						&lt;div class="slide" style="position: relative;"&gt;
							&lt;img src="images/wedding/11.jpg" alt="Image"&gt;
							&lt;div class="overlay"&gt;
								&lt;div class="text-overlay"&gt;
									&lt;div class="text-overlay-title"&gt;
										&lt;h3&gt;Locked Steel Gate&lt;/h3&gt;
									&lt;/div&gt;
									&lt;div class="text-overlay-meta"&gt;
										&lt;span&gt;Illustrations&lt;/span&gt;
									&lt;/div&gt;
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;img src="images/wedding/15.jpg" alt="Image"&gt;&lt;/div&gt;
					
					&lt;/div&gt;
				&lt;/div&gt;

				&lt;div class="flexslider topmargin-sm" id="flex-slider-carousel"&gt;
					&lt;div class="slider-wrap"&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/11.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/15.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;				
					&lt;/div&gt;
				&lt;/div&gt;`

if i want add data-lightbox
it is correct do like this :

`			&lt;div class="flexslider" id="flex-slider"&gt;
					&lt;div class="slider-wrap" data-lightbox="gallery"&gt;   &lt;!-- add  data-lightbox="gallery" ############  --&gt;
						&lt;div class="slide" style="position: relative;"&gt;
                                                      &lt;a href="images/wedding/11.jpg" data-lightbox="gallery-item"&gt;    &lt;!-- add  this line ############  --&gt;
							&lt;img src="images/wedding/11.jpg" alt="Image"&gt;
							&lt;div class="overlay"&gt;
								&lt;div class="text-overlay"&gt;
									&lt;div class="text-overlay-title"&gt;
										&lt;h3&gt;Locked Steel Gate&lt;/h3&gt;
									&lt;/div&gt;
									&lt;div class="text-overlay-meta"&gt;
										&lt;span&gt;Illustrations&lt;/span&gt;
									&lt;/div&gt;
								&lt;/div&gt;
							&lt;/div&gt;
                                                       &lt;/a&gt;   &lt;!-- add  this line ############  --&gt;
						&lt;/div&gt;
						&lt;div class="slide"&gt;
                                                      &lt;a href="images/wedding/15.jpg" data-lightbox="gallery-item"&gt;    &lt;!-- add  this line ############  --&gt;
                                                            &lt;img src="images/wedding/15.jpg" alt="Image"&gt;
                                                       &lt;/a&gt;   &lt;!-- add  this line ############  --&gt;
                                                   &lt;/div&gt;
					
					&lt;/div&gt;
				&lt;/div&gt;

				&lt;div class="flexslider topmargin-sm" id="flex-slider-carousel"&gt;
					&lt;div class="slider-wrap"&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/11.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;
						&lt;div class="slide"&gt;&lt;a href="#"&gt;&lt;img src="images/wedding/thumb/15.jpg" alt="Image"&gt;&lt;/a&gt;&lt;/div&gt;				
					&lt;/div&gt;
				&lt;/div&gt;`

web404Dec 14, 2017

i see file an thank you.

<div class=”flexslider” id=”flex-slider”>
<div class=”slider-wrap”>
<div class=”slide” style=”position: relative;”>
<img src=”images/wedding/11.jpg” alt=”Image”>
<div class=”overlay”>
<div class=”text-overlay”>
<div class=”text-overlay-title”>
<h3>Locked Steel Gate</h3>
</div>
<div class=”text-overlay-meta”>
<span>Illustrations</span>
</div>
</div>
</div>
</div>
<div class=”slide”><img src=”images/wedding/15.jpg” alt=”Image”></div>

</div>
</div>

<div class=”flexslider topmargin-sm” id=”flex-slider-carousel”>
<div class=”slider-wrap”>
<div class=”slide”><a href=”#”><img src=”images/wedding/thumb/11.jpg” alt=”Image”></a></div>
<div class=”slide”><a href=”#”><img src=”images/wedding/thumb/15.jpg” alt=”Image”></a></div>
</div>
</div>

if i want add data-lightbox
it is correct do like this :

<div class=”flexslider” id=”flex-slider”>
<div class=”slider-wrap” data-lightbox=”gallery”> <!– add data-lightbox=”gallery” ############ –>
<div class=”slide” style=”position: relative;”>
<a href=”images/wedding/11.jpg” data-lightbox=”gallery-item”> <!– add this line ############ –>
<img src=”images/wedding/11.jpg” alt=”Image”>
<div class=”overlay”>
<div class=”text-overlay”>
<div class=”text-overlay-title”>
<h3>Locked Steel Gate</h3>
</div>
<div class=”text-overlay-meta”>
<span>Illustrations</span>
</div>
</div>
</div>
</a> <!– add this line ############ –>
</div>
<div class=”slide”>
<a href=”images/wedding/15.jpg” data-lightbox=”gallery-item”> <!– add this line ############ –>
<img src=”images/wedding/15.jpg” alt=”Image”>
</a> <!– add this line ############ –>
</div>

</div>
</div>

<div class=”flexslider topmargin-sm” id=”flex-slider-carousel”>
<div class=”slider-wrap”>
<div class=”slide”><a href=”#”><img src=”images/wedding/thumb/11.jpg” alt=”Image”></a></div>
<div class=”slide”><a href=”#”><img src=”images/wedding/thumb/15.jpg” alt=”Image”></a></div>
</div>
</div>

web404Dec 19, 2017

data-lightbox="gallery" did not work why ?

web404Dec 19, 2017

i fix this, close topic

SemiColonWebSTAFFDec 21, 2017

Hello,

Really Glad that your issues were resolved. Thanks for your Patience. It would be really helpful if you can please provide us with Live URLs too with your replies which will help us in providing you with a proper solution.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard