Попытка добавить карусель на веб-страницу без перенаправления

Когда я пытаюсь добавить этот код на свою веб-страницу, всякий раз, когда я нажимаю на стрелку влево или вправо, он пытается перенаправить на «# carousel-example-generic», есть ли способ для этого, не выходя из моей текущей веб-страницы?Попытка добавить карусель на веб-страницу без перенаправления

Heres код:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<link href="http://www.cssscript.com/wp-includes/css/sticky.css" rel="stylesheet" type="text/css"> 
<title>Slideshow Test</title> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
</head> 

<body> 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 

     <div class="item active"> 
      <img src="/temp/0.jpg" alt="..."> 
      <div class="carousel-caption" style="text-shadow: 5px 5px 10px #000000;"> 
      </div> 
     </div> 

     <div class="item"> 
      <img src="/temp/1.jpg" alt="..."> 
      <div class="carousel-caption"> 
       <h3>Caption Text</h3> 
      </div> 
     </div> 

     <div class="item"> 
      <img src="/temp/2.jpg" alt="..."> 
      <div class="carousel-caption"> 
       <h3>Caption Text</h3> 
      </div> 
     </div> 

    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 

    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js'></script> 

</body> 
</html>

источник

2015-06-02 user1686896

Удалить 'href' из ваших ссылок? Не знаете, какую функцию слайдера вы используете, поэтому не можете сказать, нужна ли вам это или нет. – putvande

$ ('. Carousel-control'). On ('click', function (e) {e.preventDefault();}); вам нужно что-то подобное. –

В дополнение к ответу KJ Прайса, вы можете сделать это (я полагаю, вы используете jQuery, так как вы явно используете Bootstrap):

$('.carousel-control').click(function(e){ 
    e.preventDefault(); 
});

Таким образом, вы все равно можете сохранить тег, но ссылки не будут вызывать загрузку новой страницы.

источник

2015-06-02 13:40:45

Спасибо, я добавил это в свой код, и он исправил мою проблему – user1686896

Удалить href="#carousel-example-generic" из вашего <a>. Тем не менее, вы можете потерять свою «руку». Поэтому вместо этого вы можете добавить href="javascript:void(0);".

Как так:

<a class="left carousel-control" href="javascript:void(0);" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
</a> 

<a class="right carousel-control" href="javascript:void(0);" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
</a>

источник

2015-06-02 13:37:26

Используйте свойство css * cursor: pointer * на элементе, на который вы хотите вернуть руку. – fauverism

Да, это тоже работает. –

замените <a> тег href ссылки с хэш, как:

<a class="left carousel-control" href="#" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
</a> 

<a class="right carousel-control" href="#" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
</a>

или просто удалить href из <a> тега

источник

2015-06-02 13:37:57

Это не перенаправление, а якорь, чтобы сфокусировать вашу карусель. Он должен прокрутить до <div id="carousel-example-generic" ....

Удалить href="javascript:void(0);" и добавить style="cursor:pointer"

источник

2015-06-02 13:40:49

Попытка добавить карусель на веб-страницу без перенаправления

ответ

Смежные вопросы