Develop Reference

I am trying to Horizontal timeline chart using slick plugin with the dates implemented in it

Issue:
I am trying to implement the horizontal timeline -Slick [https://codepen.io/perikan/pen/vjwXyg] but I got only one dot.
It is not meeting the functionality of implementation.
Goal:
As we click on the timeline dots the photos have to be moved in accordance with it.
Tried Code:
These are the following code I have tried.
<script type="text/javascript">
function slider_config() {
$('.slideshow').slick({
dots: true,
customPaging: function(slick,index) {
// Array conversion from the doc element
var dateList = [...document.querySelectorAll('.photo-date-info')].map(x => x.textContent);
return '<a>' + dateList[index] + '</a>';
},
infinite: false,
speed: 500,
fade: true,
cssEase: 'linear',
});
$(".loading-bar").slick({
centerMode: true,
// centerPadding: "80px",
dots: false,
infinite: false,
speed: 300,
slidesToShow: 6,
slidesToScroll: 3,
focusOnSelect: true,
asNavFor: ".labels"
});
$(".labels").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
draggable: false,
asNavFor: ".loading-bar"
});
$('.slideshow').slickLightbox({
src: 'src',
itemSelector: 'img',
caption: 'caption',
slick: {infinite:false}
});
}
div += "></i><a href='"+photo+"' download><i class='fas fa-download' style ='float: right;padding-top: 7px;color: black;'></i></a><img style='object-fit: contain;height:400px' src='"+photo+"' data-caption='As on : "+photo_date+"'><h4>As on : <span class=\"photo-date-info\">" + photo_date + "</span></h4><h5>"+p_desc+"</h5></center><span class=\"loading-bar loading-bar-bullet\"></span></div>";
//The same CSS code as in code pen

Both Vertical slide and Horizontal slide using Owl Carousel

I want to include both vertical slide and horizontal slide using owl carousel in same page.Here is my reference code.Issue is only one slide is working,if we implement both in same file
<-----------Vertical slide------------>
<script>
jQuery(document).ready(function() {
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
autoplay: true,
items: 1,
nav: true,
loop: true,
autoplayHoverPause: true,
animateOut: 'slideOutUp',
animateIn: 'slideInUp',
autoplayTimeout: 5000,
autoplayHoverPause: false,
});
});
</script>
<-----------Horizontal slide---------------------->
<script>
jQuery('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
autoplay: true,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
</script>

JQuery slides: fade effect

I am using the JQuery slides that you can find here http://www.slidesjs.com/examples/standard/
but the fade effect is not working on play, only on navigation !
<script>
$(function() {
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: {
fade: {
speed: 1000
}
}
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
});
</script>
I also tried to remove the speed from the first part of your code will get the fade working on initial play.
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: "fade"
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});

I've made this work. Per the docs, you can set the effect property for play to a string.
Check out the jsfiddle: https://jsfiddle.net/cale_b/5ac1cebL/
$(function() {
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 500,
// within the play property, effect should be a string, i.e. "fade"
effect: "fade"
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
});

Removing the speed from the first part of your code will get the fade working on initial play.
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: "fade"
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});

Overriding default wrapper name in carouFredSel

As a newbie to caroufredsel, I am trying to override the default wrapper name in for the carousels using a dynamic count.
However, the carousel rendered only has the default caroufresel_wrapper. Whereas my javascript is trying to get caroufredsel_wrapper0, caroufredsel_wrapper1, caroufredsel_wrapper2 for 3 carousels on the same page. I find it amusing that it will not get overridden.
My code for carousel creation is here
$('.carousel-content').carouFredSel({
circular: false,
infinite: false,
auto: false,
align: 'left',
width: 940,
height: 323,
scroll: 1,
wrapper: { element:'div',
classname: 'caroufredsel_wrapper.concat(carousel_count)'},
items: 4,
onCreate: function() {
$('#xy.concat(carousel_count) > .caroufredsel_wrapper.concat(carousel_count)').css('float','left');
}
});
});
}

The documentation does not make it explicit, but the carouFredSel accepts two parameters: (options, configs). The wrapper makes it part of the configs parameter. Try this:
$('.carousel-content').carouFredSel({
circular: false,
infinite: false,
auto: false,
align: 'left',
width: 940,
height: 323,
scroll: 1,
items: 4,
onCreate: function() {
$('#xy.concat(carousel_count) > .caroufredsel_wrapper.concat(carousel_count)').css('float','left');
}},
{
wrapper: {
element:'div',
classname: 'caroufredsel_wrapper.concat(carousel_count)'
});

How do i call external javascript function/lines in html?

In the javascript file i have this code:
$(function() {
$('#carousel span').append('<img src="img/gui/carousel_glare.png" class="glare" />');
$('#thumbs a').append('<img src="img/gui/carousel_glare_small.png" class="glare" />');
$('#carousel').carouFredSel({
responsive: true,
circular: false,
auto: true,
infinite: true,
items: {
visible: 1,
width: 200,
height: '56%'
},
scroll: {
fx: 'directscroll',
pauseOnHover: true,
duration: 500
}
});
$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 6
},
width: 150,
height: '66%'
}
});
$('#thumbs a').click(function() {
$('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
$('#thumbs a').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
I want that when the pauseOnHover execute that something will happen in the html file.
In the html file i included the javascript file already:
<script src="java_script.js"></script>
Also added some style code for the test:
<style>.container {
background: rgb(170, 187, 97);
background: rgba(170, 187, 97, 0.5);
}</style>
And when the pauseOnHover execute happen in the javascript file i want to display on screen this two lines in the html file:
<div class="container">Lorem ipsum dolor</div>
<div class="container">Lorem ipsum_for_testing dolor</div>