Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Vertical Carousel with number

Avatar

Avatar
Validate 10
Level 2
sunitac70336244
Level 2

Likes

7 likes

Total Posts

65 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile

Avatar
Validate 10
Level 2
sunitac70336244
Level 2

Likes

7 likes

Total Posts

65 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile
sunitac70336244
Level 2

26-12-2018

Dear All, I want to put the number when somebody selected the respective slide in carousel.

For example , I have 5 slides in my carousel and when somebody will select the slide 1 then number 1 will be displayed  , as shown below.

1654446_pastedImage_1.png

For this I have added below in my mckcarousel.less file , as shown below.

1654448_pastedImage_2.png

/* MCK Carousel - mckcarousel.less*/

@cmp-carousel-indicator-size: 10px;

@cmp-carousel-action-icon-size: 24px;

.cmp-carousel--hero {

    padding:0;

    .cmp-carousel__action {

        width: 18%;

        cursor: pointer;

        @media (max-width: @screen-medium) {

            width: 15%;

        }

        @media (max-width: @screen-small) {

            width: @gutter-padding * 2;

        }

    }

    .cmp-carousel__action--previous {

        left: 0;

        .cmp-carousel__action-icon {

            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");

        }

    }

   

    .cmp-carousel__action--next {

        right: 0;

   

        .cmp-carousel__action-icon {

            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");

        }

    }

   

    .cmp-carousel__indicators {

        .container-content();

        padding: 0;

        bottom: 50px;

        padding-left: @gutter-padding * 2;

        top: 30%;

        height: 82px;

        margin: 40px 40px 20px 20px;

        width: 52px;

        display: inline-block;

        justify-content: left;

        list-style: none;

        background-color: transparent;

        @media (max-width: @screen-medium) {

            justify-content: center;

        }

    }

   

    .cmp-carousel__indicator {

        position: relative;

        cursor: pointer;

        height: 82px;

        margin: 20px 20px 10px 10px;

        width: 52px;

        width: @cmp-carousel-indicator-size;

        height: @cmp-carousel-indicator-size;

        margin: 10px 12px;

        border-radius: 50%;

        font-size: 10;

        text-indent: -3000px;

   

        background-color: rgba(116, 116, 116, 0.5);

   

        &--active {

            background-color: rgba(0, 0, 0, 0.9);

        }

    }

   

}

/******************************************************************************************************/

My current page is looking like below.

1654449_pastedImage_3.png

But , I am not sure where can I show the number when somebody will select the slide in above less file? Can somebody please help me on this. Also how can we increase the width and height of carousel dot ?

View Entire Topic

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

26-12-2018

Great answer. For this requirement Arun provided the correct response.