BX SLIDER name following photos

Question

BX SLIDER name following photos

Navigation

#1 by (1 votes)

1

I am using bx-slider to make my image presentations. My problem arises when I want to name all the images that make up the Slider to go directly to them in Slider and I do not know how it is done. Attached photo

<div class="galeria_video">
    <ul class="slide">
        <?php if(!empty($videos)):?>
        <?php $count = 0;?>
        <?php foreach($videos as $video):?>
        <?php $count ++;?>
            <li class="<?php if($count == 1){echo 'video_full_galeria';}elseif($count == 2 or $count ==3){echo 'video_dos_columnas_galeria';}else{echo 'video_pequeno_galeria';} ?>">
                <a class="iframe link_<?php echo $count;?>" href="#video_<?php echo $count;?>" title="">
                   <!-- Boton play con before -->
                    <span class="player-playpause"></span>
                        <div class="contenedor_galeria_video_imagen relative">
                           <img src="<?php echo $video['image']['url']; ?>" alt="<?php echo $video['image']['title']; ?> - <?php echo $video['image']['alt']; ?>" />
                       </div>
                    </a>
                    <!-- Enlace del video iframe -->
                    <div style="display:none;">
                        <div class="code_<?php echo $count;?>">
                            <?php echo $video['code'];?>
                        </div>
                    </div>

                    <script type="text/javascript">
                    var url = $('.code_<?php echo $count;?> iframe').attr('src');
                    $('a.link_<?php echo $count;?>').attr('href', url);
                    </script>

                </li>
            <?php endforeach;?>
            <?php endif; ?>
    </ul>

</div>

$("#banner_contenedor").bxSlider({
    mode: 'fade',
    prevText: '<span class="boton_prev">Anterior</span>',
    nextText: '<span class="boton_next">Siguiente</span>'


});

$("#banner_contenedor_video").bxSlider({
    mode: 'fade',
    prevText: '<span class="boton_prev">Anterior</span>',
    nextText: '<span class="boton_next">Siguiente</span>'

});

javascript php

asked by Antonio Ángel Estrada Pérez 10.01.2017 в 20:30

source

1 answer

How to make a 6 x 6 board using the swing library, in netbeans, and with what elements is the best way to do it? How to use variable window.open (JavaScript)?

score 1 · Answer 1

may be like this, you take the total of the counter you assign to the number or name of the image and assign the data-cout that is the position number and in javascript you execute the functionality that the boxslider brings:

<ul>
 <?php 
   for ($i=1; $i < $count; $i++) { 
 ?>
    <li class="selImagen" data-count="<?php echo $i; ?>">nombre <?php echo $i; ?>  </li>
 <?php
   }
 ?>
</ul>

<script type="text/javascript">
  $('.selImagen').on('click', direcionar_imagen);

  function direcionar_imagen () {
    var numero = parseINt($(this).attr('data-count'));
    var slider = $('.bxslider').bxSlider();
    slider.goToSlide(numero);
  }
</script>