문제

On my Site.master file, I have the following in my <head>:

<!-- jQuery library (served from Google) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- easing Javascript file -->
<script type="text/javascript" src="http://bxslider.com/lib/plugins/jquery.easing.1.3.js"></script>
<!-- bxSlider Javascript file -->
<script type="text/javascript" src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<!-- bxSlider CSS file -->
<link href="lib/jquery.bxslider.css" rel="stylesheet" />
<script>
    jQuery(document).ready(function ( $ ) {
        $('.slider').bxSlider({
            mode: 'horizontal',
            infiniteLoop: true,
            auto: true,
            autoStart: true,
            autoDirection: 'next',
            autoHover: true,
            pause: 3000,
            autoControls: false,
            pager: true,
            pagerType: 'full',
            controls: true,
            captions: true,
            speed: 500
        });
    });
</script>

What happens is, the little bullets that represent each slide as well as the "prev" and "next" arrows are not using the images they are supposed to. If I change the CSS reference to "http://bxslider.com/lib/jquery.bxslider.css" instead of my own copy, it works FINE. I have all the images and folders in the correctly reference locations.

The issue here is, I want to change some of the CSS, but I can't if I use the external file.

도움이 되었습니까?

해결책

Apparently it needs to be pointed like this:

<!-- jQuery library (served from Google) -->
<script type="text/javascript" src=".//Scripts/jquery-1.10.2.min.js"></script>
<!-- easing Javascript file -->
<script type="text/javascript" src=".//plugins/jquery.easing.1.3.js"></script>
<!-- bxSlider Javascript file -->
<script type="text/javascript" src=".//js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href=".//lib/jquery.bxslider.css" rel="stylesheet" />
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top