Target Active Element in Slick Carousel
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
Hey guys I cant seem to find a solution on targeting the active element in a slick carousel. All I'm wanting to do is add a style to the active element clicked.
I've tried
.slick-active { background: lightgray;}
.slick-active + .slick-active { background: white; }
.slick-active:nthchild(1){}
.slick-active:nth-type-of(1){}
.slick-active:first-type-of{}
}The first option worked if the slide contained a few elements but I don't want to have to hard code that for every element added.
If I use .slick-active{} it will target all elements showing.
Any ideas? I am using slick carousel.
css-selectors carousel slick.js
edited Nov 27 '18 at 6:51
Frits
4,488102538
asked Nov 21 '18 at 23:09
PwntasticPwntastic
207
add a comment |
Hey guys I cant seem to find a solution on targeting the active element in a slick carousel. All I'm wanting to do is add a style to the active element clicked.
I've tried
.slick-active { background: lightgray;}
.slick-active + .slick-active { background: white; }
.slick-active:nthchild(1){}
.slick-active:nth-type-of(1){}
.slick-active:first-type-of{}
}The first option worked if the slide contained a few elements but I don't want to have to hard code that for every element added.
If I use .slick-active{} it will target all elements showing.
Any ideas? I am using slick carousel.
css-selectors carousel slick.js
edited Nov 27 '18 at 6:51
Frits
4,488102538
asked Nov 21 '18 at 23:09
PwntasticPwntastic
207
add a comment |
Hey guys I cant seem to find a solution on targeting the active element in a slick carousel. All I'm wanting to do is add a style to the active element clicked.
I've tried
.slick-active { background: lightgray;}
.slick-active + .slick-active { background: white; }
.slick-active:nthchild(1){}
.slick-active:nth-type-of(1){}
.slick-active:first-type-of{}
}The first option worked if the slide contained a few elements but I don't want to have to hard code that for every element added.
If I use .slick-active{} it will target all elements showing.
Any ideas? I am using slick carousel.
css-selectors carousel slick.js
edited Nov 27 '18 at 6:51
Frits
4,488102538
asked Nov 21 '18 at 23:09
PwntasticPwntastic
207
Hey guys I cant seem to find a solution on targeting the active element in a slick carousel. All I'm wanting to do is add a style to the active element clicked.
I've tried
.slick-active { background: lightgray;}
.slick-active + .slick-active { background: white; }
.slick-active:nthchild(1){}
.slick-active:nth-type-of(1){}
.slick-active:first-type-of{}
}The first option worked if the slide contained a few elements but I don't want to have to hard code that for every element added.
If I use .slick-active{} it will target all elements showing.
Any ideas? I am using slick carousel.
.slick-active { background: lightgray;}
.slick-active + .slick-active { background: white; }
.slick-active:nthchild(1){}
.slick-active:nth-type-of(1){}
.slick-active:first-type-of{}
}.slick-active { background: lightgray;}
.slick-active + .slick-active { background: white; }
.slick-active:nthchild(1){}
.slick-active:nth-type-of(1){}
.slick-active:first-type-of{}
}css-selectors carousel slick.js
css-selectors carousel slick.js
edited Nov 27 '18 at 6:51
Frits
4,488102538
asked Nov 21 '18 at 23:09
PwntasticPwntastic
207
edited Nov 27 '18 at 6:51
Frits
4,488102538
asked Nov 21 '18 at 23:09
PwntasticPwntastic
207
edited Nov 27 '18 at 6:51
Frits
4,488102538
edited Nov 27 '18 at 6:51
Frits
4,488102538
edited Nov 27 '18 at 6:51
Frits
4,488102538
4,488102538
asked Nov 21 '18 at 23:09
PwntasticPwntastic
207
asked Nov 21 '18 at 23:09
PwntasticPwntastic
207
asked Nov 21 '18 at 23:09
PwntasticPwntastic
207
207
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Yes, .slick-active is applied to all current slick elements that are visible in your carousel, the class that you're looking for the currently selected element is .slick-current
Your rule would be:
.slick-slide { background: white;}
.slick-slide.slick-current { background: lightgray;}
Here's a working example below, click on the blue Run code snippet button on the bottom to see it in action.
$('#slider').slick({
infinite: true,
slidesToShow: 3,
centerMode: true,
slidesToScroll: 1
});h1 {
text-align: center;
color: red;
margin: 0;
}
.slick-slide {
background-color: white;
}
.slick-slide.slick-current h1 {
background-color: lightgray;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div id="slider">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
</div>answered Nov 26 '18 at 13:57
FritsFrits
4,488102538
Awesome! I now see why it wasn't targeting the first when you added the h1 after. thanks for your help and your explanation was great!
– Pwntastic
Nov 26 '18 at 22:02
@Pwntastic I’m glad I could help :)
– Frits
Nov 27 '18 at 2:23
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421716%2ftarget-active-element-in-slick-carousel%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Yes, .slick-active is applied to all current slick elements that are visible in your carousel, the class that you're looking for the currently selected element is .slick-current
Your rule would be:
.slick-slide { background: white;}
.slick-slide.slick-current { background: lightgray;}
Here's a working example below, click on the blue Run code snippet button on the bottom to see it in action.
$('#slider').slick({
infinite: true,
slidesToShow: 3,
centerMode: true,
slidesToScroll: 1
});h1 {
text-align: center;
color: red;
margin: 0;
}
.slick-slide {
background-color: white;
}
.slick-slide.slick-current h1 {
background-color: lightgray;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div id="slider">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
</div>answered Nov 26 '18 at 13:57
FritsFrits
4,488102538
Awesome! I now see why it wasn't targeting the first when you added the h1 after. thanks for your help and your explanation was great!
– Pwntastic
Nov 26 '18 at 22:02
@Pwntastic I’m glad I could help :)
– Frits
Nov 27 '18 at 2:23
add a comment |
Yes, .slick-active is applied to all current slick elements that are visible in your carousel, the class that you're looking for the currently selected element is .slick-current
Your rule would be:
.slick-slide { background: white;}
.slick-slide.slick-current { background: lightgray;}
Here's a working example below, click on the blue Run code snippet button on the bottom to see it in action.
$('#slider').slick({
infinite: true,
slidesToShow: 3,
centerMode: true,
slidesToScroll: 1
});h1 {
text-align: center;
color: red;
margin: 0;
}
.slick-slide {
background-color: white;
}
.slick-slide.slick-current h1 {
background-color: lightgray;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div id="slider">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
</div>answered Nov 26 '18 at 13:57
FritsFrits
4,488102538
Awesome! I now see why it wasn't targeting the first when you added the h1 after. thanks for your help and your explanation was great!
– Pwntastic
Nov 26 '18 at 22:02
@Pwntastic I’m glad I could help :)
– Frits
Nov 27 '18 at 2:23
add a comment |
Yes, .slick-active is applied to all current slick elements that are visible in your carousel, the class that you're looking for the currently selected element is .slick-current
Your rule would be:
.slick-slide { background: white;}
.slick-slide.slick-current { background: lightgray;}
Here's a working example below, click on the blue Run code snippet button on the bottom to see it in action.
$('#slider').slick({
infinite: true,
slidesToShow: 3,
centerMode: true,
slidesToScroll: 1
});h1 {
text-align: center;
color: red;
margin: 0;
}
.slick-slide {
background-color: white;
}
.slick-slide.slick-current h1 {
background-color: lightgray;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div id="slider">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
</div>answered Nov 26 '18 at 13:57
FritsFrits
4,488102538
Yes, .slick-active is applied to all current slick elements that are visible in your carousel, the class that you're looking for the currently selected element is .slick-current
Your rule would be:
.slick-slide { background: white;}
.slick-slide.slick-current { background: lightgray;}
Here's a working example below, click on the blue Run code snippet button on the bottom to see it in action.
$('#slider').slick({
infinite: true,
slidesToShow: 3,
centerMode: true,
slidesToScroll: 1
});h1 {
text-align: center;
color: red;
margin: 0;
}
.slick-slide {
background-color: white;
}
.slick-slide.slick-current h1 {
background-color: lightgray;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div id="slider">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
</div>$('#slider').slick({
infinite: true,
slidesToShow: 3,
centerMode: true,
slidesToScroll: 1
});h1 {
text-align: center;
color: red;
margin: 0;
}
.slick-slide {
background-color: white;
}
.slick-slide.slick-current h1 {
background-color: lightgray;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div id="slider">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
</div>$('#slider').slick({
infinite: true,
slidesToShow: 3,
centerMode: true,
slidesToScroll: 1
});h1 {
text-align: center;
color: red;
margin: 0;
}
.slick-slide {
background-color: white;
}
.slick-slide.slick-current h1 {
background-color: lightgray;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div id="slider">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
</div>answered Nov 26 '18 at 13:57
FritsFrits
4,488102538
answered Nov 26 '18 at 13:57
FritsFrits
4,488102538
answered Nov 26 '18 at 13:57
FritsFrits
4,488102538
answered Nov 26 '18 at 13:57
FritsFrits
4,488102538
4,488102538
Awesome! I now see why it wasn't targeting the first when you added the h1 after. thanks for your help and your explanation was great!
– Pwntastic
Nov 26 '18 at 22:02
@Pwntastic I’m glad I could help :)
– Frits
Nov 27 '18 at 2:23
add a comment |
Awesome! I now see why it wasn't targeting the first when you added the h1 after. thanks for your help and your explanation was great!
– Pwntastic
Nov 26 '18 at 22:02
@Pwntastic I’m glad I could help :)
– Frits
Nov 27 '18 at 2:23
Awesome! I now see why it wasn't targeting the first when you added the h1 after. thanks for your help and your explanation was great!
– Pwntastic
Nov 26 '18 at 22:02
Awesome! I now see why it wasn't targeting the first when you added the h1 after. thanks for your help and your explanation was great!
– Pwntastic
Nov 26 '18 at 22:02
@Pwntastic I’m glad I could help :)
– Frits
Nov 27 '18 at 2:23
@Pwntastic I’m glad I could help :)
– Frits
Nov 27 '18 at 2:23
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421716%2ftarget-active-element-in-slick-carousel%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
