We are using the slick carousel such that we have the <div class='item__wrapper'> only displaying 1 slide at a time. Below it are three items where on click of the item, the slick carousel should be updated.

Problems

1. When using item__boxes as a slick carousel, all of our styling is messed up so we cannot do $('.item__boxes).slick({});
2. When clicking on the first, second, or third item in item__boxes, the item__wrapper is always set to slide 3

Question

• How can we setup the item__boxes such that on click of that item it matches our goals? For example, clicking on second item in item__boxes sets the item__wrapper to second slide.

Goal/Expected Results:

1. On click of first item, set the first slide as the active slide in item__wrapper
2. on click of second item, set the second slide as the active slide in item__wrapper
3. on click of third item, set the third slide as the active slide in item__wrapper
4. do all of the goals 1-3 without doing $('.item__boxes).slick({});

Code:

$('.item__wrapper').slick({
	
          infinite: true,
          speed: 1500,
          dots: false,
          prevArrow: false,
          nextArrow: false
});

$('.item__boxes').on('click', function() {
	
	var slickIndex = $(this).attr('data-slick-index');
	$('.item__wrapper').slick('slickGoTo', slickIndex);
});

.filter {
  width: 100%;
  height: 100%;
  padding: 45px;
  margin-right: -45px;
}
.item {
  display: none;
  position: relative;
}
.item.active {
  display: block;
}
.item1 {
  background-image: url("");
}
.item2 {
  background-image: url("");
}
.item3 {
  background-image: url("");
}
.item__wrapper {
  max-width: 60%;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(238, 238, 238, 0.5);
}
.item__img img {
  top: 0px;
  position: absolute;
  width: 100% !important;
  opacity: 0.5;
}
.item__text {
  top: 0px;
  position: relative;
  min-height: 100%;
  line-height: 1.4;
  padding-right: 70px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: top;
  justify-content: center;
}
.item__boxes {
  display: flex;
  position: relative;
  opacity: 0.9;
}
.item__boxes > div {
  border: 1px solid;
}
.col-padding {
  padding: 16px 16px 5px 16px;
}
.col-m-12 {
  width: 100%;
}
@media (min-width: 1024px) {
  .col-t-6 {
    width: 50%;
  }
}

<link rel="stylesheet" type="text/css" href=".9.0/slick.min.css"/>

<link rel="stylesheet" type="text/css" href=".9.0/slick-theme.css"/>
<script type="text/javascript" src="//code.jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src=".9.0/slick.min.js"></script>
				
<div class="item__wrapper">
   <div class="item active" id='item1'>
					<div class="item__text">
						<div class="filter">
							<h3>Some title 1</h3>
							<p>Efficiently municate sticky quality vectors after pelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
						</div>
					</div>	
    </div>
	  <div class="item active" id="item2" >
        <div class="item__text">
						<div class="filter">
							<h3>Some title 2</h3>
							<p>Efficiently municate sticky quality vectors after pelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
						</div>
					</div>	
    </div>
	  <div class="item active"  id="item3" >
        <div class="item__text">
						<div class="filter">
							<h3>Some title 3</h3>
							<p>Efficiently municate sticky quality vectors after pelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
						</div>
					</div>	
    </div>
	
   
</div>
<div class="item__boxes">
     <div class="box col-m-12 col-t-6 col-padding" data-slick-index="-1">
						<div>Some Title</div>
						<div>Enthusiastically incubate diverse initiatives without multifunctional strategic theme areas.</div>
				</div>
				<div class="box col-m-12 col-t-6 col-padding" data-slick-index="0">
					<div>Globally Title</div>
					<div>Globally impact integrated infomediaries via seamless mindshare. </div>
				</div>
				<div class="box col-m-12 col-t-6 col-padding" data-slick-index="1">
					<div>Distinctively Title</div>
					<div>Distinctively strategize long-term high-impact ideas whereas client-centered leadership skills.</div>
				</div>
	</div>

We are using the slick carousel such that we have the <div class='item__wrapper'> only displaying 1 slide at a time. Below it are three items where on click of the item, the slick carousel should be updated.

Problems

1. When using item__boxes as a slick carousel, all of our styling is messed up so we cannot do $('.item__boxes).slick({});
2. When clicking on the first, second, or third item in item__boxes, the item__wrapper is always set to slide 3

Question

• How can we setup the item__boxes such that on click of that item it matches our goals? For example, clicking on second item in item__boxes sets the item__wrapper to second slide.

Goal/Expected Results:

1. On click of first item, set the first slide as the active slide in item__wrapper
2. on click of second item, set the second slide as the active slide in item__wrapper
3. on click of third item, set the third slide as the active slide in item__wrapper
4. do all of the goals 1-3 without doing $('.item__boxes).slick({});

Code:

$('.item__wrapper').slick({
	
          infinite: true,
          speed: 1500,
          dots: false,
          prevArrow: false,
          nextArrow: false
});

$('.item__boxes').on('click', function() {
	
	var slickIndex = $(this).attr('data-slick-index');
	$('.item__wrapper').slick('slickGoTo', slickIndex);
});

.filter {
  width: 100%;
  height: 100%;
  padding: 45px;
  margin-right: -45px;
}
.item {
  display: none;
  position: relative;
}
.item.active {
  display: block;
}
.item1 {
  background-image: url("https://placeimg./1000/480/nature");
}
.item2 {
  background-image: url("https://placeimg./640/480/arch");
}
.item3 {
  background-image: url("https://placeimg./640/480/tech");
}
.item__wrapper {
  max-width: 60%;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(238, 238, 238, 0.5);
}
.item__img img {
  top: 0px;
  position: absolute;
  width: 100% !important;
  opacity: 0.5;
}
.item__text {
  top: 0px;
  position: relative;
  min-height: 100%;
  line-height: 1.4;
  padding-right: 70px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: top;
  justify-content: center;
}
.item__boxes {
  display: flex;
  position: relative;
  opacity: 0.9;
}
.item__boxes > div {
  border: 1px solid;
}
.col-padding {
  padding: 16px 16px 5px 16px;
}
.col-m-12 {
  width: 100%;
}
@media (min-width: 1024px) {
  .col-t-6 {
    width: 50%;
  }
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.min.css"/>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
<script type="text/javascript" src="//code.jquery./jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery./jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
				
<div class="item__wrapper">
   <div class="item active" id='item1'>
					<div class="item__text">
						<div class="filter">
							<h3>Some title 1</h3>
							<p>Efficiently municate sticky quality vectors after pelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
						</div>
					</div>	
    </div>
	  <div class="item active" id="item2" >
        <div class="item__text">
						<div class="filter">
							<h3>Some title 2</h3>
							<p>Efficiently municate sticky quality vectors after pelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
						</div>
					</div>	
    </div>
	  <div class="item active"  id="item3" >
        <div class="item__text">
						<div class="filter">
							<h3>Some title 3</h3>
							<p>Efficiently municate sticky quality vectors after pelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
						</div>
					</div>	
    </div>
	
   
</div>
<div class="item__boxes">
     <div class="box col-m-12 col-t-6 col-padding" data-slick-index="-1">
						<div>Some Title</div>
						<div>Enthusiastically incubate diverse initiatives without multifunctional strategic theme areas.</div>
				</div>
				<div class="box col-m-12 col-t-6 col-padding" data-slick-index="0">
					<div>Globally Title</div>
					<div>Globally impact integrated infomediaries via seamless mindshare. </div>
				</div>
				<div class="box col-m-12 col-t-6 col-padding" data-slick-index="1">
					<div>Distinctively Title</div>
					<div>Distinctively strategize long-term high-impact ideas whereas client-centered leadership skills.</div>
				</div>
	</div>

• javascript
• jquery
• html
• css
• slick.js

1 Answer 1

Try this.

$('.item__wrapper').slick({
  infinite: true,
  speed: 1500,
  dots: false,
  prevArrow: false,
  nextArrow: false
});

$('[data-slide]').click(function(e){
  var slideno = $(this).data('slide');
  $('.item__wrapper').slick('slickGoTo', slideno);
});

.filter {
  width: 100%;
  height: 100%;
  padding: 45px;
  margin-right: -45px;
}
.item {
  display: none;
  position: relative;
}
.item.active {
  display: block;
}
.item1 {
  background-image: url("https://placeimg./1000/480/nature");
}
.item2 {
  background-image: url("https://placeimg./640/480/arch");
}
.item3 {
  background-image: url("https://placeimg./640/480/tech");
}
.item__wrapper {
  max-width: 60%;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(238, 238, 238, 0.5);
}
.item__img img {
  top: 0px;
  position: absolute;
  width: 100% !important;
  opacity: 0.5;
}
.item__text {
  top: 0px;
  position: relative;
  min-height: 100%;
  line-height: 1.4;
  padding-right: 70px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: top;
  justify-content: center;
}
.item__boxes {
  display: flex;
  position: relative;
  opacity: 0.9;
}
.item__boxes > div {
  border: 1px solid;
}
.col-padding {
  padding: 16px 16px 5px 16px;
}
.col-m-12 {
  width: 100%;
}
@media (min-width: 1024px) {
  .col-t-6 {
    width: 50%;
  }
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.min.css"/>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
<script type="text/javascript" src="//code.jquery./jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery./jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
				
<div class="item__wrapper">
   <div class="item active" id='item1'>
					<div class="item__text">
						<div class="filter">
							<h3>Some title 1</h3>
							<p>Efficiently municate sticky quality vectors after pelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
						</div>
					</div>	
    </div>
	  <div class="item" id="item2" >
        <div class="item__text">
						<div class="filter">
							<h3>Some title 2</h3>
							<p>Efficiently municate sticky quality vectors after pelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
						</div>
					</div>	
    </div>
	  <div class="item"  id="item3" >
        <div class="item__text">
						<div class="filter">
							<h3>Some title 3</h3>
							<p>Efficiently municate sticky quality vectors after pelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
						</div>
					</div>	
    </div>
	
   
</div>
<div class="item__boxes">
     <div class="box col-m-12 col-t-6 col-padding" data-slide="0">
						<div>Some Title</div>
						<div>Enthusiastically incubate diverse initiatives without multifunctional strategic theme areas.</div>
				</div>
				<div class="box col-m-12 col-t-6 col-padding" data-slide="1">
					<div>Globally Title</div>
					<div>Globally impact integrated infomediaries via seamless mindshare. </div>
				</div>
				<div class="box col-m-12 col-t-6 col-padding" data-slide="2">
					<div>Distinctively Title</div>
					<div>Distinctively strategize long-term high-impact ideas whereas client-centered leadership skills.</div>
				</div>
	</div>