Главная » PHP » Делаем следующую и предыдущую кнопки в стрелки

Делаем следующую и предыдущую кнопки в стрелки

У меня есть слайд-шоу, в котором есть кнопки для следующего и предыдущего (я не использую jquery), и мне нужно превратить мои следующие и предыдущие кнопки в стрелки, и я понятия не имею, с чего начать. Я не мог найти ответ где-нибудь еще для этого.

CSS

.slide {
display:inline-block;
position: relative;
}
.slide img {
display:block;
max-width: 100%;
height: 300px;;
width: 500px;
}
.slide img:hover + .slide-caption {
opacity: 1;
}

.slide-title {
margine:0 0 1rem;
}
.slide-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
color: white;
background-color: rgba( 0, 0, 0, 0.5 );
opacity:0;
}
.slide-caption:hover {
opacity: 1;
}
/*div.description {
color:blue;
}*/

div.prev {
text-align: left;
}
div.next {
margin-left:400px;
margin-top:0px;
}

PHP

while ($row = $result->fetch_assoc()) {
$pic_array[$count] = $row['pic_url'];
$titles[$count] = $row['title'];
$descriptions[$count] = $row['description'];
$count++;
}

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($_POST['action'] == 'Previous') {
$index = $_POST['i'];
if ($index == 0) {
$index = count($pic_array) - 1;
echo "<div class='slide'>
<img src= ".$dir.$pic_array[$index]." />
<div class='slide-caption'>
<h3 class='slide-title'> $titles[$index] </h3>
<p> $descriptions[$index] </p>
</div>
</div>";
}
else {
$index--;
echo "<div class='slide'>
<img src= ".$dir.$pic_array[$index]." />
<div class='slide-caption'>
<h3 class='slide-title'> $titles[$index] </h3>
<p> $descriptions[$index] </p>
</div>
</div>";
}
echo '<form action="gallery.php" method="post">
<input type="submit" name="action" value="Previous">
<input type="submit" name="action" value="Next">';
echo "<input type='hidden' name='i' value= '$index'' >";

}
if ($_POST['action'] == "Next") {
$index = $_POST['i'];
if ($index == count($pic_array) - 1) {
$index = 0;
echo "<div class='slide'>
<img src= ".$dir.$pic_array[$index]." />
<div class='slide-caption'>
<h3 class='slide-title'> $titles[$index] </h3>
<p> $descriptions[$index] </p>
</div>
</div>";
}
else {
$index++;
echo "<div class='slide'>
<img src= ".$dir.$pic_array[$index]." />
<div class='slide-caption'>
<h3 class='slide-title'> $titles[$index] </h3>
<p> $descriptions[$index] </p>
</div>
</div>";
}

echo '<form action="gallery.php" method="post">
<input type="submit" name="action" value="Previous">
<input type="submit" name="action" value="Next">';
echo "<input type='hidden' name='i' value= '$index' >";}

} else {
$index = 1;
echo "<div class='slide'>
<img src= ".$dir.$pic_array[$index]." />
<div class='slide-caption'>
<h3 class='slide-title'> $titles[$index] </h3>
<p> $descriptions[$index] </p>
</div>
</div>";
echo '<form action="gallery.php" method="post">
<div class="prev">
<input type="submit" name="action" value="Previous">
</div>
<div class="prev">
<input type="submit" name="action" value="Next">
</div>';
echo "<input type='hidden' name='i' value= '$index' >";
/*echo "<div class='description'
<p> $descriptions[$index] </p>
</div>";*/}

0

Решение

Если вы собираетесь продолжать использовать <form> в качестве основы вашего слайд-шоу, то я предлагаю использовать <button> вместо <input type="submit">, Вы получите гораздо больший контроль над тем, что вы визуально представляете пользователю и что отправляется на сервер (так как вы используете <form>).

По умолчанию <button> в пределах <form> будет действовать как кнопка отправки. Кнопки позволяют вам устанавливать содержимое внутри них, что намного более гибко, чем то, что позволяет делать большинство входов.

Следующий фрагмент имеет несколько вариантов.

  • Установить font-icon или HTML-сущность в качестве контента.
  • Установите изображение в качестве содержимого.
  • Установите изображение в качестве фона кнопки (вам нужно будет определить размеры, чтобы это работало).
button {
margin: 0;
padding: 0;
border: 0;
background: 0;
}
button img {
display: block;
}
.next {
width: 100px;
height: 25px;
background-image: url( http://placehold.it/100x25 );
background-repeat: no-repeat;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<button value="Next">
<i class="fa fa-arrow-right fa-2x"></i>
</button>

<br>

<button value="Next">
<img src="http://placehold.it/100x25">
</button>

<br>

<button class="next" value="Next"></button>
0

Другие решения

Других решений пока нет …

Источник
По вопросам рекламы [email protected]
Web-Answers © 2024 Наверх