Change style on change of 'left' value

Change style on change of 'left' value

I am working on slider where an image moved with 'left' value by the difference of 1170px. Where i want opacity 1 on main image and the opacity of others will be low. My html is the following:
  1. <div style="width: 1170px;">
    <ul style="width: 4680px; height: 450px; left: -1170px;" class="imageList">
       
            <li height="450px" width="1170px" class="image">
                       <img width="1170px" height="450px" title="" alt="" src="http://ecx.images-amazon.com/images/I/52Ra33zPxhL.jpg">
            </li>
       
            <li height="450px" width="1170px" class="image slidimgs">
                         <img width="1170px" height="450px" title="" alt="" src="http://ecx.images-amazon.com/images/I/52Ra33zPxhL.jpg">
            </li>
       
            <li height="450px" width="1170px" class="image slidimgs">
                          <img width="1170px" height="450px" title="" alt="" src="http://ecx.images-amazon.com/images/I/52Ra33zPxhL.jpg">
            </li>
       
            <li height="450px" width="1170px" class="image slidimgs">
                       <img width="1170px" height="450px" title="" alt="" src="http://ecx.images-amazon.com/images/I/72A6jEgsGLL.png">
            </li>
  2. </ul>
  3. </div>

Here is jquery code which i try but only image change:

  1. <script>
    jQuery(document).ready(function(){
       
        jQuery("ul.imageList li.image").addClass( "slidimgs" );
     
        var Ele = jQuery(".imageList");
       
        if(Ele.css("left") == "0px"){
            jQuery("ul.imageList li.image:nth-child(1)").toggleClass( "slidimgs" );
        }

    });
    </script>

thanks in advance