This question was migrated from Webmasters Stack Exchange because it can be answered on Stack Overflow.
Migrated 22 hours ago.
I'm trying to create a gallery slider using slick slider js library. A basic mobile responsive gallery carousel with a progress bar. Everything is running however I'm having trouble with some styling. I want the effect of the gallery center image to be raised above the other 2 (half) slides in the background. For some reason- I can't achieve the center padding effect and the slides are jumping a little when its on autoplay. The widths are also messed up responsively. Im not sure why none of my styles are working correctly. I attached my html code(without the actual image links) and how I initialized it in my js. I also attached some css that I had implemented (I had originally fully styled it- but I took out the styles because it really got messy).
Any advice how to proceed will be greatly appreciated
//Initialize slick slider
$(document).ready(function() {
$(".coverflow").slick({
dots: false,
arrows: true,
infinite: true,
centerMode: true,
centerPadding: '150px',
variableWidth: true,
focusOnSelect: true,
speed: 1000,
autoplay: true,
autoplaySpeed: 2500,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
}, ],
});
});
//add slick-center class to create the carousel effect
$(document).ready('.coverflow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-center').removeClass('slick-center');
$('.slick-slide').eq(nextSlide).addClass('slick-center');
})
//add the slick container class
;
$(document).ready('.coverflow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-center .slide-container').removeClass('slick-center');
$('.slick-slide').eq(nextSlide).find('.slide-container').addClass('slick-center');
});
//progress bar for slick slider
$(document).ready(function() {
var $slider = $('.coverflow');
var $progressBar = $('.progress');
var $progressBarLabel = $('.slider__label');
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
$progressBar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc);
$progressBarLabel.text(calc + '% completed');
});
});
.progress {
max-width: 800px!important;
margin-right: auto;
margin-left: auto;
display: block;
width: 75%;
height: 3px;
border-radius: 3px;
overflow: hidden;
background-color: #5B5B5B;
background-image: linear-gradient(to right, #FA5927, #FA5927);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .4s ease-in-out;
margin-top: 55px;
}
.slide-number {
color: #FA5927;
font-family: 'PT SANS';
font-size: var(--wp--preset--font-size--medium)!important;
padding: 10px;
}
.slide-container {
margin-right: 50px;
margin-left: 50px;
}
#media only screen and (max-width:880px) {
/*--gallery slider--*/
.coverflow img {
width: 70%;
margin: auto;
}
}
#media only screen and (max-width:787px) {
/*--gallery slider--*/
.coverflow img {
width: 50%;
margin: auto;
}
}
#media only screen and (max-width:414px) {
/*--gallery slider--*/
.coverflow img {
width: 35%;
margin: auto;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="slider">
<section class="coverflow">
<div class="slide-container">
<span class="slide-number">01</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">02</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">03</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">04</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">05</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">06</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
</section>
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only">
</span>
</div>
<!-- end content -->
</div>
Related
I am trying to build a swiper slider with the following layout:
<div id="brokerCarousel" class="swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
#foreach($partners as $partner)
<div class="swiper-slide">
<img src="{{ $partner->media('logo')->first() !== null ? $partner->media('logo')->first()->getUrl(800,600,'canvas') : '' }}" alt="{{ $partner->name }}">
</div>
#endforeach
</div>
</div>
</div>
I then have my JS code:
brokerCarousel() {
if (document.getElementById('brokerCarousel')) {
new Swiper('#brokerCarousel .swiper-container', {
slidesPerView: 10,
spaceBetween: 30,
autoplay: {
delay: 2500,
},
breakpoints: {
576: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
1200: {
slidesPerView: 5,
}
}
});
}
}
Where I set slides to 5.
My scss:
#brokerCarousel {
&.swiper{
width: 100%;
height: 100%;
.swiper-container {
max-height: 100%;
.swiper-wrapper {
.swiper-slide {
background-color: #fff;
padding: 30px;
border-radius: 10px;
img {
height: 200px;
width: auto;
}
}
}
}
}
}
But this is what my slides look like:
As you can see there are only two slides in view which is wrong by itself but they are also very wide. When I inspect the .swiper-slide in my inspector I see this style is applied: width: 1600px; margin-right: 30px;. My container is 1440px so one slide can never be 1600px when I have it set to 5.
What am I missing?
Made a slider "Swiper". To the right of it is the tag "h1", the text of which needs to be changed depending on what the current picture is.
If you press the right button, then the indexes are 2, 3, 4, and if the left one is 0, 1, 2.
It is unclear why this is happening.
I tried to use the "document.getElementsByClassName("left-element")" class for searching, but it doesn't work that way.
Works only with "document.getElementById("box")".
Also, at initial loading, the picture tries to be drawn at 100% in width, but then collapses to the 50% I need. How to remove this effect?
var swiper = new Swiper('.swiper-container', {
effect: 'cube',
grabCursor: true,
slidesPerView: 'auto',
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 50,
shadowScale: 0.3,
centerSlidesBounds: true,
},
direction: 'horizontal',
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
on: {
init: function () {
},
},
});
swiper.on('slideChange', function () {
let name = swiper.activeIndex;
/*
let element = document.getElementsByClassName("left-element");
alert(name);
*/
let element = document.getElementById("box");
element.innerHTML = (name) + " " + "Index";
});
.main {
position: fixed;
padding: 16px;
margin-top:40px;
width: 50%;
}
.swiper-button-prev{
left: 2%;
}
.swiper-button-next{
left: 92%;
}
.swiper-pagination-bullets.swiper-pagination-horizontal {
width: 100%;
bottom: -25%;
}
.left-element {
background: silver;
display: inline-block;
position: absolute;
left: 100%;
width: 80%;
margin-top: 0;
}
h1.left-element {
width: 80%;
height: 90%
}
img{
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
<div class="main">
<h1 class="left-element" id="box">Empty index</h1>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://www.fonstola.ru/large/201309/119067.jpg">
</div>
<div class="swiper-slide">
<img src="https://www.fonstola.ru/large/201408/148243.jpg">
</div>
<div class="swiper-slide">
<img src="https://www.fonstola.ru/large/201111/50599.jpg">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
I've removed some of your effect on the Swiper, but feel free to add it back (cause I tried to set up the default Swiper again on the Swiper Docs :D ).
And remember to change the <div class="swiper-container"> to <div class="swiper">
Here's the code in Javascript:
const swiper = new Swiper(".swiper-container", {
// Install modules,
direction: 'horizontal',
initialSlide: 0,
loop: true,
speed: 500,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// ...
});
swiper.on('slideChange', () => {
let swiperIndex = swiper.realIndex
console.log('Swiper index right now: ', swiperIndex)
let element = document.getElementById("box")
element.innerHTML = (swiperIndex) + " " + "Index";
})
Whenever the slide change, it'll assign the realIndex to swiperIndex
Here's the fiddle for you to have a clearer look: Fiddle
I'm trying to create a set of div's that will animate on hover. I'm using jQuery and the HoverIntent plugin to animate it.
The HTML
<body>
<div class="wrapper">
<div class="grow" style="background-color:#03045E;"></div>
<div class="grow" style="background-color:#0077B6;"></div>
<div class="grow" style="background-color:#00B4D8;"></div>
<div class="grow" style="background-color:#90E0EF;"></div>
</div>
</body>
... and the JS Code
$(function() {
$('.grow').hoverIntent({
over : function() {
$('.grow').animate({
'width':'15%'
},{duration:400,queue:false});
$(this).animate({
'width':'55%'
},{duration:400,queue:false});
},
out : function() {
//we need to check if the mouse is outside the main object to fire a back to original state. Hence, the mouse out effect on the containers itself should do nothing.
}
});
$('.wrapper').hoverIntent({
out : function() {
$('.grow').animate({
'width':'25%'
});
}
});
});
It is available here - https://jsfiddle.net/be0u3hfx/12/
I cant seem to understand why the last div flickers on hover of any div! Help!?
It's because during the size changes, the widths of the elements will occasionally amount to more than 100% total, and when that happens, the browser briefly wraps the last element, making it appear below the first. To prevent that, add display: flex; to your wrapper's CSS rules.
Fixed code:
$(function() {
$('.grow').hoverIntent({
sensitivity: 1, // sensitivity threshold
interval: 10, // milliseconds for onMouseOver polling interval
timeout: 500, // number = milliseconds delay before onMouseOut
over: function() {
$('.grow').animate({
'width': '15%'
}, {
duration: 400,
queue: false
});
$(this).animate({
'width': '55%'
}, {
duration: 400,
queue: false
});
},
out: function() {}
});
$('.wrapper').hoverIntent({
over: () => {},
out: function() {
$('.grow').animate({
'width': '25%'
});
}
});
});
* {
box-sizing: border-box;
}
body {
background-color: black;
margin: 0 auto;
padding: 10px;
height: 100vh;
width: 100%;
}
.wrapper {
padding: 10px;
height: 100%;
background: #fff;
display: flex;
}
.grow {
box-sizing: border-box;
height: 100%;
/* Original height */
width: 25%;
/* Original width */
float: left;
/* Just for presentation (Not required) */
position: relative;
/* Just for presentation (Not required) */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.10.1/jquery.hoverIntent.min.js"></script>
<div class="wrapper">
<div class="grow" style="background-color:#03045E;"></div>
<div class="grow" style="background-color:#0077B6;"></div>
<div class="grow" style="background-color:#00B4D8;"></div>
<div class="grow" style="background-color:#90E0EF;"></div>
</div>
I created a photo gallery with lightgallery and cycle2 using together, cycle is a carousel plugin, lightgallery is a lightbox gallery.
so when I click any image on carousel than it's image is opening on lightbox and I want to tell you everything works very well until you click any category on carousel.so I want to bother you about this problem
After you click any category the lightbox is not opening if you are click image on carousel and see error on console.
plugin gives me this erros
lightgallery#1.3.5,lg-fullscreen#1.0.1,lg-hash#1.0.1,lg-pager#1.0.1,lg-share#1.0.1,lg-thumbnail#1.0…:10 Uncaught TypeError: Cannot read property 's' of undefined
at new c (lightgallery#1.3.5,lg-fullscreen#1.0.1,lg-hash#1.0.1,lg-pager#1.0.1,lg-share#1.0.1,lg-thumbnail#1.0…:10)
at Function.<anonymous> (lightgallery#1.3.5,lg-fullscreen#1.0.1,lg-hash#1.0.1,lg-pager#1.0.1,lg-share#1.0.1,lg-thumbnail#1.0…:5)
at Function.each (jquery.min.js:2)
at b.build (lightgallery#1.3.5,lg-fullscreen#1.0.1,lg-hash#1.0.1,lg-pager#1.0.1,lg-share#1.0.1,lg-thumbnail#1.0…:5)
at HTMLDivElement.<anonymous> (lightgallery#1.3.5,lg-fullscreen#1.0.1,lg-hash#1.0.1,lg-pager#1.0.1,lg-share#1.0.1,lg-thumbnail#1.0…:5)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.q.handle (jquery.min.js:3)
for two weeks I'm trying to solve this problem
please click to demo
or
$(document).ready(function() {
options = {
next: "#single-right",
log: false,
fx: "fade",
caption: ".cycle-caption",
captionTemplate: "{{title}}",
pauseOnHover: true,
pager: "#single-pager",
pagerTemplate: "<img class='lazyload' data-src='{{exthumbimage}}' width='70' height='70'>",
prev: "#single-left",
slides: "div[data-hidden='false']"
}
function generateSlider(opt) {
$("#myCarousel").cycle(opt);
}
generateSlider(options);
$('#myCarousel').lightGallery({
selector: "div[data-hidden='false']",
exThumbImage: "data-exthumbimage",
loadYoutubeThumbnail: true,
youtubeThumbSize: 'default',
loadVimeoThumbnail: true,
vimeoThumbSize: 'thumbnail_medium',
});
$("#filter li").on("click", function() {
var activeId = $(this).attr("id");
if (activeId == "show-all") {
$(".item").attr("data-hidden", "false");
} else {
$(".item").attr("data-hidden", "true");
$("div[data-id = '" + activeId + "']").attr("data-hidden", "false");
}
$("#myCarousel").cycle("destroy");
options['pagerTemplate'] = "<img class='lazyload' data-src='{{children.0.src}}' width='70' height='70'>"
generateSlider(options);
return false;
});
});
.mySlideShow {
width: 700px;
position: relative;
}
.item img {
cursor: pointer;
}
#single-pager img {
margin: 3px;
cursor: pointer;
width: 60px;
height: 60px;
}
#filter {
position: absolute;
top: 0;
right: 10%;
z-index: 100;
}
#filter li {
display: inline-block;
background: rgba(0, 0, 0, .7);
color: #FFF;
cursor: pointer;
padding: 12px;
}
.cycle-caption {
position: absolute;
bottom: 14%;
left: 0;
padding: 12px;
background: rgba(0, 0, 0, .5);
color: #FFF;
text-align: center;
width: 100%;
z-index: 100;
}
div[data-hidden='true'] {
display: none;
}
<link rel='stylesheet' href='https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css'>
<div class="mySlideShow">
<div id="myCarousel">
<div class="item" data-src="http://images.freeimages.com/images/previews/49a/massive-gear-1255802.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/fa7/my-ride-1552678.jpg" data-id="animals" data-hidden="false" data-title="image 1">
<img class="lazyload" data-src="http://images.freeimages.com/images/previews/f7a/gear-1462890.jpg" />
</div>
<div class="item" data-src="http://images.freeimages.com/images/previews/7ae/autos-1194364.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/5f6/kaputtes-auto-1564173.jpg" data-id="sports" data-hidden="false" data-title="image 2">
<img class="lazyload" data-src="http://images.freeimages.com/images/previews/20e/some-grill-1450817.jpg" />
</div>
<div class="item" data-src="https://vimeo.com/1084537" data-exthumbimage="http://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-2.jpg" data-id="natural" data-hidden="false" data-title="this is the video">
<img class="lazyload" data-src="http://images.freeimages.com/images/previews/c23/cat-1396828.jpg" />
</div>
<div id="single-pager">
</div>
</div>
<ul id="filter">
<li id="animals">Animals</li>
<li id="sports">Sports</li>
<li id="natural">Natural</li>
<li id="show-all">All</li>
</ul>
<div class="cycle-caption"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js'></script>
<script src='https://cdn.jsdelivr.net/g/lightgallery#1.3.5,lg-fullscreen#1.0.1,lg-hash#1.0.1,lg-pager#1.0.1,lg-share#1.0.1,lg-thumbnail#1.0.1,lg-video#1.0.1,lg-autoplay#1.0.1'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js'></script>
<script src='https://f.vimeocdn.com/js/froogaloop2.min.js'></script>
When you filter your carousel items, you break the lightbox instance. So what you need to do is:
Destroy the lightbox (if you don't, when you try to instantiate a new one it will recreate helper DOM elements needed for it to function, resulting in duplicate ID's and your lightbox will break). You need to call
$('#myCarousel').data('lightGallery').destroy(true);
Without the true parameter, it's not properly destroyed, it's just closed (in case it's open).
Filter the slider.
Create a new lightbox.
Working example: https://codepen.io/anon/pen/XRemwV
Doc ref: http://sachinchoolur.github.io/lightGallery/docs/api.html#methods
I am new to this so please bear with me if my question is obviously stupid. I am trying to incorporate the slideshow as shown in this site using caroufredsel http://coolcarousels.frebsite.nl/c/48/
Now I needed to add captions to the images. so after trying to tweak the code unsuccessfully, I created a workaround where I created another carousel for just the captions and synchronized it with the main carousel. It worked that the captions appeared just fine but now I am not able to synchronize it with the click function/feature on the main carousel. if I comment the click function out , it works splendidly, but I need that click function. what am I doing wrong or is there an easier way to do what I want. I went thru the documentation and tried to incorporate a new div with id "item". but then the entire "pager" section disappears etc. I will include the full code here. thanks in advance for the help.
my css looks like this::
html, body {
height: 100%;
padding: 0;
margin: 0px;
}
body {
min-height: 400px;
}
#wrapper {
width: 697px;
height: 400px;
margin: -155px 0 0 -330px;
position: absolute;
top: 270px;
left: 50%;
box-shadow: 0px 1px 20px #c5a101;
border:3px solid #c5a101;
background-color: rgba(246,217,90,0.9);
}
#carousel {
width: 580px;
height: 360px;
overflow: hidden;
position: relative;
z-index: 2;
float:left;
}
#carousel img {
display: block;
float: left;
}
#pager {
width: 112px;
height: 350px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
#pager div {
height: 81px;
width: 100px;
box-shadow: 0px 0px 5px #c5a101;
}
#pager img {
cursor: pointer;
display: block;
height: 81px;
width: 112px;
margin-bottom: 5px;
float: left;
border:3px solid #c5a101;
cursor:default;
}
#texts-wrapper {
width: 700px;
height: 50px;
float: left;
}
#texts > div {
width: 300px;
height: 50px;
position: relative;
float: left;
margin-top: auto;
}
#texts > div > div {
width: 700px;
position: absolute;
left: 2px;
bottom: 5px;
float: right;
padding-top: 25px;
}
#texts a {
color:#083377;
font-family:Trajan Pro;
font-size: 16px;
font-weight: bold;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
text-decoration: none;
outline: none;
display: block;
background-color: rgba(248,229,145,0.4);
border: 1px solid rgba(246,217,90,0.4);
width: 700px;
height: 85px;
padding-left: 10px;
}
#texts a:hover {
background-color: rgba(255,208,0,0.9);
box-shadow: 0px 2px 15px #c5a101;
color: rgba(227,75,76,0.7);
}
my html code looks like this::
<div id="wrapper">
<div id="inner">
<div id="carousel">
<img src="img/building.jpg" width="580" height="350" />
<img src="img/guytalkingtokids.jpg" width="580" height="350" />
<img src="img/group.jpg" width="580" height="350" />
<img src="img/oath.jpg" width="580" height="350" />
<img src="img/finalists.jpg" width="580" height="350" />
</div>
<div id="pager"></div>
</div>
<div id="texts-wrapper">
<div id="texts">
<div>
<a style="text-decoration:none; " href="blank.html" >
<div><p>The red building across the street.</p> </div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div><p>How yall doin? blah blah</p> </div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div><p>Lotsa ppl!.</p></div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div><p>I put another caption!</p></div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div> <p>Yay! We won?! How?!</p></div></a>
</div>
</div>
</div>
</div>
And my script tag looks like::
$(function() {
var $carousel = $('#carousel'),
$pager = $('#pager');
// gather the thumbnails
var $thumb = $( '<div class="thumb" />' );
$carousel.children().each(function() {
var src = $(this).attr( 'src' );
$thumb.append( '<img src="' + src.split('/large/').join('/small/') + '" />' );
});
// duplicate the thumbnails
for (var a = 0; a < $carousel.children().length - 1; a++) {
$pager.append( $thumb.clone() );
}
// create large carousel
$carousel.carouFredSel({
items: {
visible: 1,
width: 580,
height: 350
},
//auto:false,/* temporary: to stop automatic scrolling */
scroll: {
fx: 'directscroll',
pauseOnHover:true,
duration: 500,
timeoutDuration: 5500,
onBefore: function( data ) {
var oldSrc = data.items.old.attr('src').split('/large/').join('/small/'),
newSrc = data.items.visible.attr('src').split('/large/').join('/small/'),
$t = $thumbs.find('img:first-child[src="' + newSrc + '"]').parent();
$t.trigger('slideTo', [$('img[src="' + oldSrc + '"]', $t), 'next']);
}
}
});
// create thumb carousels
var $thumbs = $('.thumb');
$thumbs.each(function( i ) {
$(this).carouFredSel({
auto: false,
scroll: {
fx: 'directscroll'
},
responsive:true,
items: {
start: i+1,
visible: 1,
width: 112,
height: 89.6
}
});
// click the carousel---> comment out this portion to disable the click function on small images
$(this).click(function() {
var src = $(this).children().first().attr('src').split('/small/').join('/large/');
$carousel.trigger('slideTo', [$('img[src="' + src + '"]', $carousel), 'next']);
});
});
// comment out the click function and uncomment this section of #texts to have a synchronised carousel with captions but no click function
$('#texts').carouFredSel({
items: 1,
direction: 'left',
responsive:true,
auto: {
play: true,
duration: 500,
easing: 'quadratic',
timeoutDuration: 5500
}
});
});
Now I used jquery version 1.8.2 and caroufredsel version 6.2.1. thanks again for the help in advance. sorry if my code looks messy as well.Latest update as of 3/22/2014:: I went thru the documentation of the plugin CarouFredSel and stumbled upon one of the settable parameters/ configurations called "synchronise". If I understood it right, I can synchronise 2 carousels to respond to the same event. So i added the line of code "synchronise:{"#carousel"} into the text carousel to tell it to synchronise it with the main carousel...
$('#texts').carouFredSel({
items: 1,
direction: 'left',
responsive:true,
synchronise:{"#carousel"},/*This is the new line I added*/
auto: {
play: true,
duration: 500,
easing: 'quadratic',
timeoutDuration: 5500
}
});
Unfortunately that did not work as well. Now there is no timing pattern as well. everytime I click the small image it just went ahead in position at a random rate. So I am still stuck with the same problem if not making it worse. Thanks for the help in advance.
After fighting with the problem for more than a week, I was able to figure out a solution to my problem. Now it may not be the best solution but it worked and hence I am posting it so that in future if somebody else has the same or similar problem, it may be of help.Now if anyone came up with a solution that works better, I would still like you to post it here for I may want to learn what you did, why you did it and learn from the experience. I dont claim to be an expert programmer. I am still learning and this site has been a great learning tool for me so far.Anyway coming back to the problem, I added this piece of code...
//sais try: synchronise texts and carousel to work together and on click
var index = $(this).triggerHandler( 'currentPosition' );
if ( index == 0 ) {
index = $(this).children().length;
}
// trigger the titles carousel
$('#texts').trigger('slideTo', [ index, 'next' ]);
right here...
// create large carousel
$carousel.carouFredSel({
items: {
visible: 1,
width: 580,
height: 350
},
//auto:false,/* temporary: to stop automatic scrolling */
scroll: {
fx: 'directscroll',
pauseOnHover:true,
duration: 500,
timeoutDuration: 3500,
onBefore: function( data ) {
var oldSrc = data.items.old.attr('src').split('/large/').join('/small/'),
newSrc = data.items.visible.attr('src').split('/large/').join('/small/'),
$t = $thumbs.find('img:first-child[src="' + newSrc + '"]').parent();
$t.trigger('slideTo', [$('img[src="' + oldSrc + '"]', $t), 'next']);
/* [ the code goes here!]*/
now with that i was able to synchronise the carousels (#carousel, #texts) together to work with the click function/feature as well. Also I had tried to synchronise the carousel using a synchronise function thats in carouFredSel. Well take that out. It did not work.I dont know if this is going to be useful to anyone else but if it did, thats great. But again if somebody came up with a better solution please do let me know as well. Thanks. Keep up the goo work