CODEWITHSUNDEEP
jqueryhtmlcss
user1355300
user1355300

Reputation: 4987

Setting absolute position

I'm using a jQuery plugin for the slider. It displays 3 items at a time, and adds a class slick-active to the active items.

I want to display only the middle item as full width but want to display only 50% of the first and last items, as shown in the following image: enter image description here

For that purpose, I am trying to set the absolute position of 50%, but it does not seem to work. I am unable to figure out how to set the position to get the above results.

This is what I'm trying:

.slick-active:first-child{
    position: absolute;
    left: -50%;
}

.slick-active:last-child{
    position: absolute;
    right: -50%;
}

Demo: http://jsfiddle.net/yu76xt4f/

Upvotes: 0

Views: 262

Answers (2)

Mr_Green
Mr_Green

Reputation: 41832

I added the following CSS, which I don't recommend. as it is using !important in it. I am using !important to override the inline styling providing by the plugin.

CSS

.slick-slide.slick-active{
    width: 100px !important;
}

.slick-slide.slick-active + .slick-slide.slick-active{
    width: 400px !important;
}

.slick-slide.slick-active + .slick-slide.slick-active + .slick-slide.slick-active{
    width: 100px !important;
}

Working Fiddle

Upvotes: 2

Nishan Senevirathna
Nishan Senevirathna

Reputation: 719

Try this, Use position: relative instead of absolute. and provide fixed value instead of percentage.

.slick-active:first-child{
    position: relative;
    left: -50px;
}

.slick-active:last-child{
       position: relative;
       left: -50px;
}

.slick-active {
     position: relative;
     left: -50px;
}

Upvotes: 0

Related Questions