We Keep Coding

css messing up when dynamically appending to swiper js slide

I have an array of elements and i'm trying to chunk the array and dynamically append every element to a swiper js slide. My chunk strategy is to chuck the array every 5 elements and I am looping on the chucked new arrays and appending every element of that array to the swiper slide. And whenever a new chuck array is found a new class called .level3Items will be created that will be housing the 5 .swiper-slide classes. Now my chuck strategy and adding every element to .level3Items works but my CSS messes up when the elements are dynamically added. For debugging I have 2 main divs below. The first one (.level3) is manually coded and it works right. On the second main div (.level3_2) I am adding the same code as the first main div but dynamically and as shows the CSS messes up. How can I fix this? How can I make .level3_2 look like .level3? Thanks in advance.
const swiperRegular = new Swiper('#swiperRegular', {
direction: 'horizontal',
slidesPerView: 5,
spaceBetween: 10,
slidesPerGroup: 5,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
disabledClass: 'disabled_swiper_button'
}
});
let myArray = ['test1', 'test2', 'test3', 'test4', 'test5']
const result = Object.values(
myArray.map((x, i) => ({
grp: Math.floor(i / 5),
val: x
}))
.reduce((acc, i) => {
acc[i.grp] ||= [];
acc[i.grp].push(i.val);
return acc;
}, {})
);
result.forEach((elm) => {
const dataElem = $('<div class="level3Items"><div class="swiper" id="swiperRegular"><div class="swiper-button-prev"><i class="fa-solid fa-arrow-left"></i></div><div class="swiper-button-next"><i class="fa-solid fa-arrow-right"></i></div><div class="swiper-wrapper">');
elm.forEach(item => {
dataElem.find('.swiper-wrapper').append(`<div class="swiper-slide"><div class="topSwiperSlideItems"><div class="imgCon"><img src="https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=%5B660%2C300%5D&w=1500&h=750&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F20%2F2021%2F07%2F23%2Fgrizzly-bear-1.jpg" /></div></div><div class="bottomSwiperSlideItems"><div class="textCon"><p>${item}</p></div></div></div>`)
});
$(".level3_2").append(dataElem);
const swiperRegular = new Swiper('#swiperRegular', {
direction: 'horizontal',
slidesPerView: 5,
spaceBetween: 10,
slidesPerGroup: 5,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
disabledClass: 'disabled_swiper_button'
}
});
})
.disabled_swiper_button {
opacity: 0;
cursor: auto;
pointer-events: none;
}
.level3 {
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
margin-top: 1%;
background-color: pink;
}
.level3_2 {
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
margin-top: 1%;
background-color: pink;
}
.level3Items {
display: flex;
width: 100%;
height: fit-content;
}
.level3Items #swiperRegular {
width: 100%;
height: 100%;
padding-left: 1.5%;
padding-right: 1.5%;
}
.level3Items .swiper-button-prev {
display: flex;
justify-content: center;
align-items: center;
top: 35%;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: blue;
}
.level3Items .swiper-button-prev::after {
display: none;
}
.level3Items .swiper-button-prev i {
font-size: 1.4vw;
color: #ffffff;
}
.level3Items .swiper-button-next {
display: flex;
justify-content: center;
align-items: center;
top: 35%;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: blue;
}
.level3Items .swiper-button-next::after {
display: none;
}
.level3Items .swiper-button-next i {
font-size: 1.4vw;
color: #ffffff;
}
.level3Items .swiper-slide {
display: flex;
flex-direction: column;
}
.level3Items .swiper-slide .topSwiperSlideItems {
display: flex;
width: 100%;
height: 20vh;
background-color: gold;
}
.level3Items .swiper-slide .topSwiperSlideItems .imgCon {
display: grid;
width: 95%;
height: 95%;
margin: auto;
}
.level3Items .swiper-slide .topSwiperSlideItems .imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
}
.level3Items .swiper-slide .bottomSwiperSlideItems {
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
background-color: purple;
}
.level3Items .swiper-slide .bottomSwiperSlideItems .textCon {
display: flex;
width: 95%;
height: fit-content;
margin-left: 5%;
}
.level3Items .swiper-slide .bottomSwiperSlideItems .textCon p {
font-size: 3vw;
color: #bfbfbf;
margin-top: auto;
margin-bottom: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://unpkg.com/swiper#8/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
<!--working-->
<div class="level3">
<div class="level3Items">
<div class="swiper" id="swiperRegular">
<div class="swiper-button-prev">
<i class="fa-solid fa-arrow-left"></i>
</div>
<div class="swiper-button-next">
<i class="fa-solid fa-arrow-right"></i>
</div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="topSwiperSlideItems">
<div class="imgCon">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=%5B660%2C300%5D&w=1500&h=750&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F20%2F2021%2F07%2F23%2Fgrizzly-bear-1.jpg" />
</div>
</div>
<div class="bottomSwiperSlideItems">
<div class="textCon">
<p>test</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="topSwiperSlideItems">
<div class="imgCon">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=%5B660%2C300%5D&w=1500&h=750&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F20%2F2021%2F07%2F23%2Fgrizzly-bear-1.jpg" />
</div>
</div>
<div class="bottomSwiperSlideItems">
<div class="textCon">
<p>test</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="topSwiperSlideItems">
<div class="imgCon">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=%5B660%2C300%5D&w=1500&h=750&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F20%2F2021%2F07%2F23%2Fgrizzly-bear-1.jpg" />
</div>
</div>
<div class="bottomSwiperSlideItems">
<div class="textCon">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--not working-->
<div class="level3_2">
</div>

Swiper.JS Rows: 2 is stacking everything resulting in infinite rows

I am trying to integrate SwiperJS into a wordpress theme I am creating. I am trying to create a slider with two rows, and it is basically just like their demo here: https://codesandbox.io/s/x3ty9k?file=/index.html:912-955
But when I follow the demo, I am left with every slide stacking on top of each other, which is obviously more than 2 rows (12 rows in total right now, and could increase if I add more slides). The weirdest part about it is that the slider registers that there SHOULD be more "pages", and the left/right buttons and pagination still work (but pressing next just brings you to a blank page of the slider).
The Problem:
Rows are stacking when following the documentation for SwiperJS.
What I Have tried:
Gone through my CSS to alter any flex displays, gotten rid of anything that could affect the slider layout
tried following https://codepen.io/andreacazzola90/pen/ZEBBXqm for a different method of obtaining multi rows with SwiperJS
Changed around HTML to try the slider with more and less wrappers.
The JavaScript:
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
grid: {
rows: 2
},
spaceBetween: 30,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
The HTML:
<div class="swiper mySwiper">
<div class="conference-speakers-cards-container container swiper-wrapper" data-chunksize="6">
<?php
if ( !function_exists('wpeventin')) {
echo 'Please Install and Activate the WP Event Solution plugin in order to use the Speakers Section';
} else {
wp_reset_query();
$speaker_array = [];
$args = [
'post_type' => 'etn-speaker',
'posts_per_page' => -1
];
$the_query = new WP_Query($args);
if ($the_query->have_posts()) {
while($the_query->have_posts()) {
$the_query->the_post();
$speaker_avatar = apply_filters("etn/speakers/avatar", \Wpeventin::assets_url() . "images/avatar.jpg");
$post_meta = get_post_meta(get_the_ID());
$speaker_data = [
'speaker_name' => apply_filters('etn_speaker_title', get_the_title()),
'speaker_designation' => $post_meta["etn_speaker_designation"][0],
'speaker_thumbnail' => has_post_thumbnail() ? get_the_post_thumbnail_url() : $speaker_avatar,
'speaker_permalink' => get_the_permalink()
];
array_push($speaker_array, $speaker_data);
}
}
//<!-- SPEAKER CARD TEMPLATE -->
foreach($speaker_array as $speaker) { ;?>
<div class="swiper-slide">
<a href="<?php echo $speaker['speaker_permalink']; ?>">
<div class="conference-speaker-card-wrapper ">
<div class="speaker-card-avatar-wrapper">
<img src="<?php echo esc_url( $speaker['speaker_thumbnail'] ); ?>" alt="Picture of <?php echo $speaker['speaker_name']; ?>"/>
</div>
<div class="speaker-card-info-wrapper">
<div class="speaker-card-title"><?php echo $speaker['speaker_name']; ?></div>
<div class="speaker-card-designation"><?php echo $speaker['speaker_designation']; ?></div>
</div>
</div>
</a>
</div>
<?php
} ?>
<?php
}
wp_reset_query();
?>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
The SCSS:
.conference-speakers-container {
//display: flex;
//flex-direction: column;
//min-height: 100vh;
width: 100vw;
position: relative;
.conference-speaker-slider-left-arrow {
position: absolute;
height: 50px;
width: 50px;
font-size: 35px;
top: 50%;
left: 50px;
transform: translate(-50%, 50%);
color: #909090;
border: 2px solid #909090;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 1010;
padding-top: 5px;
#include mobile {
left: 15px;
height: 35px;
width: 35px;
font-size: 28px;
}
}
.conference-speaker-slider-right-arrow {
position: absolute;
height: 50px;
width: 50px;
font-size: 35px;
top: 50%;
right: 50px;
transform: translate(50%, 50%);
color: #909090;
border: 2px solid #909090;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 1010;
padding-top: 5px;
.conference-speaker-slider-right-arrow:hover {
color: $hover-color;
}
#include mobile {
right: 15px;
height: 35px;
width: 35px;
font-size: 28px;
}
}
.conference-speakers-title-container {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
height: 125px;
.title-word-blue {
color: $main-color;
font-size: 2rem;
}
.title-word-black {
color: black;
font-size: 2rem;
margin-left: 15px;
}
}
.conference-speakers {
//height: calc(100vh - 125px);
width: 100%;
background-color: white;
//display: flex;
//justify-content: center;
//align-items: center;
position: relative;
}
.mySwiper {
width: 100%;
height: 100%;
margin: auto;
.conference-speakers-cards-container {
//swiper-wrapper
//display: flex;
//justify-content: center;
//gap: 1em;
//flex-wrap: wrap;
padding-bottom: 125px;
padding-top: 50px;
//overflow: hidden;
//min-width: calc(100% - 120px);
margin: auto;
.swiper-slide {
//margin: auto;
//min-width: 100%;
//display: flex;
//justify-content: center;
//align-items: center;
max-width: 344px;
height: calc((100% - 30px) / 2) !important;
a {
//display: inline-block;
.conference-speaker-card-wrapper {
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
max-width: 344px;
&:hover {
transform: scale(1.02);
transition: .25s;
.speaker-card-info-wrapper {
.speaker-card-title {
color: #0073AE;
text-decoration: underline;
transition: .25s;
}
}
}
.speaker-card-avatar-wrapper {
height: 344px;
img {
height: 344px;
width: 100%;
object-fit: cover;
object-position: center;
}
}
.speaker-card-info-wrapper {
background-color: white;
color: #2C344A;
padding: 10px;
text-align: center;
.speaker-card-title {
font-size: 21px;
font-weight: bold;
margin-bottom: -5px;
}
.speaker-card-designation {
font-size: 15px;
}
}
}
}
}
}
}
}
And yes, there's a lot commented out, and that's because I'm trying to figure this out hahah

How to make a react app change according to the browser size?

I'm writing a code for a UI for a certain group, and i have the following code:
App.js:
import React, { Component } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Helmet from 'react-helmet';
import TextField from "#mui/material/TextField";
import HRLOGO from './images/highradius-logo-3.png';
import ABCLOGO from './images/Group 20399.png';
export default class App extends Component
{
state = {};
render()
{
return (
<div className="Bod">
<div>
<img src={HRLOGO} alt="" className="container-div"/>
</div>
<div>
<img src={ABCLOGO} alt="" className="container-div2"/>
</div>
<Helmet>
<style>{'body { background-color: #2d4250; }'}</style>
</Helmet>
<div>
<h1 className="InvoiceStyle">Invoice List</h1>
</div>
<div className="Rectangle">
</div>
<div className="search">
<TextField
id="outlined-basic"
variant="outlined"
fullWidth
label="Search Customer ID"
/>
</div>
<footer className="Privacy">
<p>
Pivacy Policy
</p>
</footer >
</div>
);
}
}
App.css:
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
#media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.Rectangle {
width: 2000px;
height: 500px;
background: #293d48;
position: fixed;
top: 165px;
}
.container-div {
display: flex;
height: 8vh;
width: 20vw;
position: fixed;
top: 8px;
right: 600px;
text-align: center;
}
.InvoiceStyle {
display: flex;
color: #fff;
font-family: "Open Sans";
position: fixed;
top: 100px;
left: 25px;
}
.container-div2 {
display: flex;
height: 8vh;
width: 20vw;
position: fixed;
top: 7px;
left: 15px;
}
.Privacy {
display: flex;
position: fixed;
top: 700px;
left: 600px;
}
.search {
position: fixed;
top: 175px;
left: 600px;
width: 20%;
/* height: 40px; */
background-color: #fff;
border: none;
border-top-left-radius: 10px !important;
border-bottom-left-radius: 10px !important;
border-top-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: rgb(11, 68, 253);
}
.App-link {
color: #ff0000;
}
#keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
How do i make it such that the images and text change according to the aspect area of the platform it is being viewed it? For example, normally on a 16:9 ratio it looks like this:
When browser size changes:
How do I prevent this? Any help would be useful. Thanks!

Keep parallax fixed but change image on scroll?

I have a div where I want to change the image and text when I scroll on it. I have gotten some of the way but I cant figure out how to keep the "parallax-row" fixed, but act like its scrolling? I have a code pen link to help below.
MY GOAL : When you scroll anywhere in the parallax-window everything should stick, but the image and text changes. I have seen some cool image effects using parallax so thats why I am learning it.
codepen
<html>
<body>
<!---------PARALLAX------->
<div class="parallax-window">
<div class="parallax-container">
<div class="parallax-row">
<div class="parallax-image-container">
<img src="https://cdn.pixabay.com/photo/2016/11/18/19/07/happy-1836445_1280.jpg" alt="">
</div>
<div class="parallax-text">
<h1>Title 1</h1>
<h3>This is a description.
</h3>
<div class="mouseicon">
<div class="mousewheel"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
/*PARALLAX */
.parallax-container::-webkit-scrollbar {
display: none;
}
.parallax-window {
position: relative;
height: 400px;
width: 100vw;
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.parallax-container {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
height: 1000px;
background-color: rgb(221, 221, 221);
}
.parallax-row {
display: flex;
justify-content: flex-start;
align-items: center;
height: 400px;
width: 100%;
}
.parallax-image-container {
display: block;
height: inherit;
}
.parallax-image-container img {
height: inherit;
}
.parallax-text {
height: inherit;
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
padding: 0em 4em;
}
.mouseicon {
margin: 1em;
display: flex;
justify-content: center;
width: 40px;
height: 65px;
border: solid 2px black;
border-radius: 50px;
}
.mousewheel {
width: 10px;
height: 20px;
background-color: black;
border-radius: 50px;
animation: scroll 1.5s infinite;
}
#keyframes scroll {
0% {
transform: translateY(0px);
opacity: 0.5;
}
100% {
transform: translateY(5px);
}
}
JS
//-------PARALLAX SCROLL-------- //
const parallaxContainer = document.querySelector(".parallax-window");
const parallaxImage = document.querySelector(".parallax-image-container img");
parallaxContainer.scrolltop = 0;
const parallaxText = document.querySelector(".parallax-text h1")
var scrollHandler = function () {
var newImageUrl = parallaxImage.src;
var scrollTopParallax =
parallaxContainer.scrollTop || parallaxContainer.scrollTop;
if (scrollTopParallax > 100) {
newImageUrl =
"https://cdn.pixabay.com/photo/2016/11/29/07/16/balancing-1868051__480.jpg";
parallaxText.innerHTML = "Title 2"
}
if (scrollTopParallax < 100) {
newImageUrl =
"https://cdn.pixabay.com/photo/2016/11/18/19/07/happy-1836445_1280.jpg";
parallaxText.innerHTML = "Title 1"
}
parallaxImage.src = newImageUrl;
console.log("new: " + parallaxImage.src);
};
parallaxContainer.addEventListener("scroll", scrollHandler);

I have updated my codepen with my own answer. essentially creating an overlay to scroll on and then changing the elements based on that invisible overlays scroll position. see link to codepen above.

Stretch the image in the first slide Slick Slider

I have this slick slider and i want to Stretch the image in the first current active slide
i want do this https://prnt.sc/slrcny
for example here example working slider you want to see this example. First current active slide is
Stretch. How i can do it in the slick slider ?
$(document).ready(function() {
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
centerMode: false,
focusOnSelect: true
});
});
.slider-nav div {
width: 200px;
height: 60px;
}
.slider-for {
width: 250px;
height: 250px;
margin
}
.slider-wrap {
positon: absolute;
width: 300px;
height: 300px;
margin-left: 20px;
}
.slick-arrow:before {
color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet" />
<div class="slider-wrap">
<div class="slider-nav">
<div>
<img src="http://placehold.it/50x50"> </img>
</div>
<div>
<img src="http://placehold.it/50x51"> </img>
</div>
<div>
<img src="http://placehold.it/50x52"> </img>
</div>
<div>
<img src="http://placehold.it/50x53"> </img>
</div>
<div>
<img src="http://placehold.it/50x54"> </img>
</div>
</div>
</div

Here's a working snippet for what you want to achieve, in this case the images sizes are 400x600 but since we are using the background-size: cover property the image will be covered in the whole <div class="slide-photo"></div>
$(document).ready(function () {
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
centerMode: false,
focusOnSelect: true,
});
});
.slider-nav {
height: 400px;
}
.slider-nav .slick-list {
width: 100%;
height: 100%;
}
.slider-nav .slick-list .slick-track {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.slider-nav .slick-list .slick-slide {
margin: 0 15px;
position: relative;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.slider-nav .slick-list .slick-slide .slide-photo {
-webkit-transition: 1s cubic-bezier(0.83, 0, 0.17, 1);
transition: 1s cubic-bezier(0.83, 0, 0.17, 1);
background-position: bottom;
background-size: cover;
height: 50%;
}
.slider-nav .slick-list .slick-slide .slide-photo::after, .slider-nav .slick-list .slick-slide .slide-photo::before {
bottom: 0;
width: 0%;
height: 4px;
background-color: #ffbf00;
position: absolute;
content: '';
-webkit-transition: 1s cubic-bezier(0.83, 0, 0.17, 1);
transition: 1s cubic-bezier(0.83, 0, 0.17, 1);
}
.slider-nav .slick-list .slick-slide .slide-photo:after {
right: 50%;
}
.slider-nav .slick-list .slick-slide .slide-photo:before {
left: 50%;
}
.slider-nav .slick-list .slick-slide.slick-current .slide-photo {
background-color: #c1c1c1;
background-position: center center;
height: 100%;
}
.slider-nav .slick-list .slick-slide.slick-current .slide-photo:before, .slider-nav .slick-list .slick-slide.slick-current .slide-photo:after {
width: 50%;
}
/*# sourceMappingURL=style.css.map */
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
</head>
<body>
<div class="slider-container">
<div class="slider-nav">
<div>
<div class="slide-photo" style="background-image: url(https://picsum.photos/seed/one/400/600);"></div>
</div>
<div>
<div class="slide-photo" style="background-image: url(https://picsum.photos/seed/fdsgds/400/600);"></div>
</div>
<div>
<div class="slide-photo" style="background-image: url(https://picsum.photos/seed/gwegwe/400/600);"></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
</body>
</html>