Изменение кнопок слайдера [требует правки]

343

19 мая 2017, 13:21

Как изменить картинки переключателей слайдера в htmL?

НАДО УБРАТЬ МАШИНЫ ВНИЗУ И ЗАМЕНИТЬ НА ДРУГИЕ КАРТИНКИ

/* general page styling */
html,body {padding:0; margin:0; background:#fff;}
.wrapper {width:98%; max-width:1200px; margin:30px auto;}
h1.cssplay {margin:0; padding:0; color:#2ab; font:300 50px/60px 'Lato', sans-serif;}
h1.cssplay a {color:#2ab; text-decoration:none;}
h2.title {margin:0; padding:10px 0; color:#444; font:300 25px/30px 'Lato', sans-serif;}
h2.title a {color:#2ab; text-decoration:none;}
h3.date {margin:0; padding:0; color:#000; font:300 20px/25px 'Lato', sans-serif;}
p {width:98%; max-width:1200px; margin:0 auto; padding:8px 0; color:#000; font:300 18px/30px 'Lato', sans-serif;}
.wrapper p {width:100%; max-width:1200px;}

/* Swiper styling */
.swiper-container{width:98%; max-width:1200px; padding-bottom:10px; margin:50px auto 10px auto;}
.swiper-slide{text-align:center;background:#fff;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;}
.swiper-slide img {display:block; width:100%;}
.swiper-pagination-thumb {width:100%; margin:0; padding:10px 0 0 0; text-align:left; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;}
/* change width depending on number of thumbs, in this demo 100%/8 = 12.5% reduced to 12% to have space between each thumbnail */
.swiper-pagination-thumb span {display:block; width:12%; height:auto; border-radius:0; margin:0; padding:0; opacity:0.6; background:transparent; transition:0.5s;}
.swiper-pagination-thumb span img {display:block; width:100%; margin-bottom:5px;}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {margin:0;}
.swiper-pagination-thumb span:hover {opacity:1;}
.swiper-pagination-thumb .swiper-pagination-bullet-active {opacity:1;}
@media only screen and (max-width: 480px) {
/* make thumbnails wrap to two rows on mobiles */
.swiper-pagination-thumb span {width:24%;}
}

<body background="Фон для сайта.jpg">
  <TABLE bgcolor="green" align="center" width="100%" border="1" style="color:white;" cellpadding="10" cellspacing="10" style="border-collapse: collapse;">
    <tr>
      <td colspan="102">
        <B><FONT size=7> <div align="center"><img src="f6.jpg" height="100" width="100" div align="left">
    </B>
      </td>
    </tr>
    <tr>
      <td width="239" valign="top">
        <FONT size=5>
          <B><div align="center"><a href="2.html"><BODY LINK=BLUE VLINK=YELLOW> Биография </a></b>
      </td>
      <td width="239">
        <FONT size=5>
          <B><div align="center"><a href="3.html"><BODY LINK=BLUE VLINK=YELLOW>Работы</A></B>
      </td>
      <td width="239">
        <FONT size=5>
          <B><div align="center"><a href="4.html"><BODY LINK=BLUE VLINK=YELLOW>Награды </A> </B>
      </td>
    </tr>
  </table>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="слайдер/lg1.jpg"></div>
      <div class="swiper-slide"><img src="слайдер/lg2.jpg"></div>
      <div class="swiper-slide"><img src="слайдер/lg3.jpg"></div>
      <div class="swiper-slide"><img src="слайдер/lg4.jpg"></div>
      <div class="swiper-slide"><img src="слайдер/lg5.jpg"></div>
      <div class="swiper-slide"><img src="слайдер/lg6.jpg"></div>
      <div class="swiper-slide"><img src="слайдер/lg7.jpg"></div>
      <div class="swiper-slide"><img src="слайдер/lg8.jpg"></div>
    </div>
    <div class="swiper-pagination-thumb"></div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
      loop: true,
      keyboardControl: true,
      autoplay: 6000,
      autoplayDisableOnInteraction: false,
      speed: 1000,
      pagination: '.swiper-pagination-thumb',
      paginationClickable: true,
      paginationBulletRender: function(swiper, index, className) {
        return '<span class="' + className + '"> <img src="http://www.cssplay.co.uk/menu/lego42037/lg' + (index + 1) + '.jpg"></span>';
      },
      spaceBetween: 10
    })
  </script>

  <FRAMESET=100></FRAMESET=100>
  <img src="http://www.cssplay.co.uk/menu/lego42037/lg' 
</body>