javascript - Swiper slider - weird behaviour -


i have 2 swiper sliders in page. 1 shown , other 1 first hidden , later shown on click when whole div contains other slider shown. first 1 works , when show other behaves weird. first shows 1 image in slider, although have set both 5 images in slider. when try inspect wrong in console, slider gets 5 images should have. other works can't figure out why behaving that. how initialize them:

$(document).ready(function () {     //initialize swiper when document ready     var myswiper = new swiper ('.drawer', {       // optional parameters       direction: 'horizontal',       loop: false,       nextbutton: '.next',       prevbutton: '.previous',       slidesperview: 5,       loopedslides: 1,       simulatetouch: false     })      var myswiper = new swiper ('.itemdetail', {       // optional parameters       direction: 'horizontal',       loop: false,       nextbutton: '.next',       prevbutton: '.previous',       slidesperview: 5,       loopedslides: 1,       simulatetouch: false     })   });

this html, haven't written full html hope picture:

<div id="main-section">       <top-bar></top-bar>        <header></header>        <!-- first swiper slider -->       <swiper-slider></swiper-slider>      </div>     <!-- hidden div shown on click -->     <div id="drawer">       <div id="item-detail">       </div>       <div id="item-detail-slider">          <!-- second swiper slider -->       <swiper-slider></swiper-slider>        </div>     </div>

i haven't written css them:

#drawer {   z-index: 5;   position: absolute;   height: 100vh;   width: 100%;   background-color: $charcoal;   display: none; }  #item-detail-carousel {   margin-top: 30px; }  .swiper-container{   text-align: center;   z-index: 0; }  .item-detail {   background-color: $white;   color: $black;   padding-top: $global-padding;   padding-bottom: $global-padding;   height: 700px;   width: 100%;    .item-hero {     position: relative;     width: 510px;      img {       max-width: 100%;       max-height: 100%;     }      .item-preview-nav {       background-color: #fff;       width: 200px;       position: absolute;       top: 200px;       right: 0;       text-align: center;       padding: 15px;        .right-arrow, .left-arrow {         position: relative;         height: 50%;       }        img {         width: 35px;         position: relative;         top: 33%;       }     }   }    .item-title {     border-top: 1px solid $black;     border-bottom: 1px solid $black;     position: relative;     padding-left: 0;     margin-left: 15px;      &:before {       content: '';       display: block;       position: absolute;       width: 60%;       top: -1px;       left: 0;       border: 1px solid $white;     }      &:after {       content: '';       display: block;       position: absolute;       width: 60%;       top: 100%;       right: 0;       border: 1px solid $white;     }    } }


-

Comments

Post a Comment

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

Image
i'm using qt framework build graphical user interface. use qgridlayout position qwidgets neatly. gui looks this: my application regularly adds new widgets gui @ runtime. these new widgets not added @ end of qlayout, somewhere in middle. the procedure bit cumbersome. applied on figure above, need take out widg_c , widg_d , ... qgridlayout. next, add widg_x and widg_y , , put other widgets again. how remove widgets qgridlayout: for in reversed(range(mygridlayout.count())): self.itemat(i).widget().setparent(none) ### as long you're dealing small amount of widgets, procedure not disaster. in application display lot of small widgets - perhaps 50 or more! application freezes second while procedure ongoing, annoying user. there way insert widgets somewhere in qlayout, without need take out other widgets? edit: apparently solution qvboxlayout simple. use function insertwidget(..) instead of addwidget(..) . docs can found link: http://doc.qt.io/qt-5/qboxlayou
Read more

python - serve multiple gunicorn django instances under nginx ubuntu -

i need serve 2 webs apps (django) on gunicorn under different domain names using nginx on ubuntu. started using tutorial: https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-16-04 it worked fine 1 using that. tried same thing second gives me 502 gateway second domain. tried following tutorial: http://michal.karzynski.pl/blog/2013/10/29/serving-multiple-django-applications-with-nginx-gunicorn-supervisor/ i'm @ part run gunicorn start script: sudo bin/gunicorn_start i response: starting webuildblack root traceback (most recent call last): file "/home/devin/webuildblack/bin/gunicorn", line 7, in <module> gunicorn.app.wsgiapp import run importerror: no module named 'gunicorn.app'; 'gunicorn' not package you have named program gunicorn.py gunicorn -package. rename file , remove gunicorn.pyc file.
Read more

module - Prestashop displayPaymentReturn hook url -

i new prestashop developer , trying create paymentmodule. have got show payment method can not proceed purchase because not know hot works. does know should redirect run hooddisplaypaymentreturn method? i happy if explain me complete navigation map make purchase. anyway, can find relation between hooks , pages? when have new module payment rely on simplest provided prestashop: bankwire. inside can find 3 hooks. hookpayment: public function hookpayment($params) { if (!$this->active) return; if (!$this->checkcurrency($params['cart'])) return; $this->smarty->assign(array( 'this_path' => $this->_path, 'this_path_bw' => $this->_path, 'this_path_ssl' => tools::getshopdomainssl(true, true).__ps_base_uri__.'modules/'.$this->name.'/' )); return $this->display(__file__, 'payment.tpl'); } hookdisplaypaymenteu: public fun
Read more