3

I'm working with a custom slider, I have many slide indicators. There should be an orange color line between 2 indicators e.g If I click on indicator 1 then there will be the line between indicators 1 and 2 and if I click indicator 2 then there will be line between 2 and 3 and so on. For this line, I'm using :after selector. CSS Code:

.carousel-indicators li:after{
    content: "";
    width: 20px;
    height: 3px;
    background: orange;
    top: 28%;
    left: 1%;
    position: absolute;
    display: inline-block;
}

HTML code:-

 <!-- Carousel Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
<!-- Carousel Indicators End -->

I've calculated that if we move from indicator 1 to nth indicator then I need to add a 6% margin in left. I want to do this with the help of jQuery i.e if I move from indicator 1 to nth then I'll add %6 in the previous margin-left (1+6 = 7%) similarly if I move from 2 to 3 then I'll add %6 in previous margin-left (7+6 = 13%) and so on. But here I need to get the previous margin-left so that I can perform some calculation/addition. How can I get :after selector margin-left? I tried the following code but it's giving me undefined.

$('.carousel-indicators li').click( function (){
        margLeft = $('.carousel-indicators li:after').css('margin-left');
        console.log(margLeft);
    });

and

$('.carousel-indicators li').click( function (){
        margLeft = $('.carousel-indicators li:after').css('marginLeft');
        console.log(margLeft);
    });

Bot are giving output as undefined.

Ali Bhutta
  • 457
  • 5
  • 20

1 Answers1

0

try this instead,

To get margin of after element by use getPropertyValue() with getComputedStyle()

About getComputedStyle()

The Window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object, or by indexing with CSS property names.

About getPropertyValue()

The CSSStyleDeclaration.getPropertyValue() method interface returns a DOMString containing the value of a specified CSS property.

window.getComputedStyle(this, ':after').getPropertyValue('margin-left');

You are not given margin-left to .carousel-indicators li:after so it gets 0px.

$('.carousel-indicators li').click( function (){
    var marginLeft = window.getComputedStyle(this, ':after').getPropertyValue('margin-left');
    console.log(marginLeft)
});
.carousel-indicators li:after{
  content: "";
  width: 20px;
  height: 3px;
  background: orange;
  top: 28%;
  left: 1%;
  position: absolute;
  display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Carousel Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
<!-- Carousel Indicators End -->

I added margin-left:20px

.carousel-indicators li:after{
  margin-left:20px
}


$('.carousel-indicators li').click( function (){
    var marginLeft = window.getComputedStyle(this, ':after').getPropertyValue('margin-left');
    console.log(marginLeft)
});
.carousel-indicators li:after{
  content: "";
  width: 20px;
  height: 3px;
  background: orange;
  top: 28%;
  left: 1%;
  position: absolute;
  display: inline-block;
  margin-left:20px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Carousel Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
<!-- Carousel Indicators End -->
Rayees AC
  • 4,426
  • 3
  • 8
  • 31