JavaScript - Swipper

   
Vista:

Swipper

Publicado por Vanesa (3 intervenciones) el 30/08/2017 14:14:37
Buenos días!!!

no soy experta en .js pero tengo éste codigo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
//!!!!! Slider para "TE RECOMENDAMOS"
  var reducir = screen.width;
$(document).ready(function()
{
      $(window).resize(function()
      {
        reducir = $( window ).width();
        if ($(".img-responsive").width() == 160)
        {
          for(i=0;i < $(".product-name").length; i++)
          {
            $(".product-name")[i].innerText = $(".product-name")[i].innerText.substring(0, 10)+'...';
          }
        }
      });
    var slideWidth = 400;
    var tabs = '#tab1';
        var currentPosition = 0;
        var slides = jQuery('.swiper-slide');
        var numberOfSlides = slides.length;
        jQuery('#slidesContainer').css('overflow', 'hidden');
        slides
                .wrapAll('<div id="slidesContainer"></div>');
        slides
                .wrapAll('<div id="slideInner"></div>')
                .css({
                    'display' : 'inline-block',
                    'width' : slideWidth
                });
        jQuery('#slideInner').css('width', (slideWidth+100) * numberOfSlides);
        jQuery('.control').bind('click', function()
        {
            currentPosition = (jQuery(this).attr('id')=='shopper_carousel_next_BK')
                    ? currentPosition+1 : currentPosition-1;
            manageControls(currentPosition)
            if(error== "true")
            {
              if (reducir < 1000 && reducir > 750 &&  reducir != 0)
              {
                jQuery('#slideInner').animate({
                    'marginLeft' : 611*(-currentPosition)
                  });
              }
            else if (reducir < 750 && reducir != 0) {
                jQuery('#slideInner').animate({
                    'marginLeft' : 420*(-currentPosition)
                  });
        }
       else if (reducir < 1300 && reducir > 1000 && reducir != 0) {
            jQuery('#slideInner').animate({
                'marginLeft' : 695*(-currentPosition)
              });
        }
            else if(reducir >= 1920)
              {
                jQuery('#slideInner').animate({
                    'marginLeft' : 1090*(-currentPosition)
                   });
                ScreenWidth = screen.width;
              }
              else if(reducir >= 1366 && reducir < 1920)
              {
                jQuery('#slideInner').animate({
                    'marginLeft' : 695*(-currentPosition)
                   });
                ScreenWidth = screen.width;
              }
                if (currentPosition>numberOfSlides-4)
                {
                    $('#shopper_carousel_next_BK').css({"display":"table"})
                }
                if (currentPosition == 0)
                {
                   $('#shopper_carousel_prev_BK').css({"display":"table"})
                }
            }
            else
            {
                if(currentPosition<0)
                {
                    currentPosition=currentPosition+1;
                }
                else
                {
                    currentPosition=currentPosition-1;
                }
            }
        })
        function manageControls(position)
        {
          error ="";
            if (jQuery('#slidesContainer ').css('width') == '250px')
            {
                if (position <0)
                {
                    jQuery('#slideInner').animate({
                        'marginLeft' : -1100
                    });
                    currentPosition=numberOfSlides-1;
                }
                if (position>numberOfSlides-1)
                {
                    jQuery('#slideInner').animate({
                        'marginLeft' : 0
                    });
                    currentPosition=1;
                }
                else
                {
                    error="true";
                }
            }
            else
            {
                if (position <0)
                {
                    currentPosition=1;
                }
                if (position>numberOfSlides-3)
                {
                    currentPosition=numberOfSlides-2;
                }
                if(error == "")
                {
                    error="true";
                    $('#shopper_carousel_prev_BK').css({"display":"block"})
                    $('#shopper_carousel_next_BK').css({"display":"block"})
                }
            }
        }
});
//!!!!! FIN slider para "TE RECOMENDAMOS"

La imagen uno que os paso es el inicio y es correcto le damos a la flecha para deslizar y ver el producto y desaparece el ultimo...os adjunto la imagen dos para que veais como queda...


1
2
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Swipper

Publicado por Vanesa (3 intervenciones) el 30/08/2017 22:06:45
Nadie puede ayudarme por favor? Creo q son los margin left, pero he estado tocando y aun me jace cosas mas raras...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Swipper

Publicado por Vainas (258 intervenciones) el 01/09/2017 11:30:38
Buenas:

Imagino que hablas de esta libreria: https://github.com/nolimits4web/Swiper

Si es asi tienes un tutorial de inicio en la web: http://idangero.us/swiper/get-started/#.WakpiLJJbcs

En el punto 4 hablan de fijar un ancho al contenedor principal pero no veo que toquen mas cosas. mira si puede ser por el tamaño de las imagenes.

No deberias tocar el codigo de la libreria solo inicializar como te dicen los tutoriales o la api.

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

Swipper

Publicado por Vanesa (3 intervenciones) el 26/09/2017 11:04:37
Muchas gracias!!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar