0

The jquery image slider works when i put it outside ng-view div. But doesn't work when i move it inside directives or when it is injected into ng-view

index.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="src/js/lightslider.js"></script> 
<script>
   $(document).ready(function() {
  $("#content-slider").lightSlider({
            loop:true,
            keyPress:true
        });
        $('#image-gallery').lightSlider({
            gallery:true,
            item:1,
            thumbItem:9,
            slideMargin: 0,
            speed:500,
            auto:true,
            loop:true,
            onSliderLoad: function() {
                $('#image-gallery').removeClass('cS-hidden');
            }  
        });
});
</script>

<body ng-controller="mainController">
<div class="wrapper">
   <div id="main">
    <!--code works when moved here-->
    <div ng-view></div>

Html code for the slider, It doesnt work inside a directive.

slider.html

    <div class="demo">
    <div class="item">            
        <div class="clearfix" style="max-width:474px;">
            <ul id="image-gallery" class="gallery list-unstyled cS-hidden">
                <li data-thumb="img/thumb/cS-1.jpg"> 
                    <img src="img/cS-1.jpg" />
                     </li>
                <li data-thumb="img/thumb/cS-2.jpg"> 
                    <img src="img/cS-2.jpg" />
                     </li>
                <li data-thumb="img/thumb/cS-3.jpg"> 
                    <img src="img/cS-3.jpg" />
                     </li> 
            </ul>
        </div>
    </div> 
</div>
Africa Matji
  • 345
  • 3
  • 19
  • You should consider create a directive to attach `lightSlider` to DOM.. – Pankaj Parkar Mar 04 '17 at 19:00
  • Hi, Thanks for your reply. I am new to Angular. How can i achieve that. – Africa Matji Mar 04 '17 at 19:01
  • I'd highly recommend to read [Thinking in AngularJS” if I have a jQuery background?](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – Pankaj Parkar Mar 04 '17 at 19:03
  • So basically there is no way of making a image slider to work with AngularJs? I have searched everywhere..all I found was ui.bootstrap carausel which also dsnt work/very buggy...I read stuff from that link, I don't find anything that can help me in this case – Africa Matji Mar 05 '17 at 19:35

0 Answers0