Website Slider on Chrome

[csosa]

Hi when I refresh my slider on Chrome it hides away
not sure if it is just me. It may be the script placements. Page

[ronpat]

The slider restarts OK on my PC in FF and Chrome. Doesn’t hide away but it’s not well centered… and it’s not responsive. Doesn’t look like it’s supposed to be.

Can’t help but notice that
<link href="Style/css/style.css" rel="stylesheet">
is creeping further and further up, away from being the last stylesheet…

[Micah_Coffey]

My chrome on fedora loads like your screen shot at first, when I hit f12 for debug, the slider popped up. Clearing cache and refreshing showed me the same as your screenshot again, so resizing the window makes div class=“flickity-viewport” go from height:20 to height:567.

I would attempt locating the function that is setting .flickity-viewport’s height and call it inside a $(‘document’).ready or equivalent.

[csosa]

@ronpat

is creeping further and further up, away from being the last stylesheet…

yeah I fixed that its last now:

<link href="Style/css/bootstrap.css" rel="stylesheet">
<link href="Style/css/font-awesome.min.css" rel="stylesheet">
<link href="Style/css/animate.css" rel="stylesheet">
<link href="Style/css/flickity.css" rel="stylesheet" media="screen">
<link href="Style/css/style.css" rel="stylesheet">

@ronpat

nd it’s not responsive

I made it responsive with:

.home-slider img {
width: 100%;
height:auto;
}

but the second slide does not show…

For some reason its not working with
width:100%;

[csosa]

@Micah_Coffey

I would attempt locating the function that is setting .flickity-viewport’s height and call it inside a $(‘document’).ready or equivalent.

may be one of these?

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

[Micah_Coffey]

No those are style sheet rules, window.resize is javascript or jquery. Maybe try searching for .flickity-viewport in .js files.

About the responsive slider images, that’s usually not easy, the images need to be high res, very wide and not tall. Then they need to be formatted properly with css or monitored with js.

[csosa]

@Micah_Coffey

Maybe try searching for .flickity-viewport in .js files.

no not there.

@Micah_Coffey

About the responsive slider images, that’s usually not easy, the images need to be high res, very wide and not tall. Then they need to be formatted properly with css or monitored with js.

I thought by using:

.home-slider img {
width: 100%;
height:auto;
}

It was being controlled…I believe it may be my JS file that may be interrupting it but not sure
what…flickity.pkgd.min.js (146.9 KB)

It says flickity is responsive but cannot seem to find any info on it on
the website http://flickity.metafizzy.co/

I think I may need to have it “Full Bleed” http://flickity.metafizzy.co/options.html#setgallerysize

[csosa]

I figured it out!! its now responsive: PAGE

HTML

  <div class="gallery js-flickity"  data-flickity-options='{ "autoPlay": 5500 }'>
          <div class="gallery-cell"><img src="images/smiledental_employees.jpg" alt=""></div>
          <div class="gallery-cell"><img src="images/dentalroom.jpg" alt="dental-room"></div>
        </div>

CSS:.

gallery {
  background-color: transparent;
}


.gallery-cell {
  width: 100%;
  height: auto;
  background-color: transparent;
}

.gallery-cell img {
  width: 100%;
  height: auto;
}

/* cell number */
.gallery-cell:before {
  display: block;
  text-align: center;
  line-height: 200px;
  font-size: 80px;
  color: white;
}

and it does not hide the slider when I refresh anymore too, killed two birds with one stone…

[ronpat]

Congratulations, Carlos It looks good!