admin管理员组

文章数量:1431413

I'm trying to create a full width, fixed-height, carousel image-slider for the home page of a website that I'm working on.

That is, where the images are scaled to a fixed-height (matching the carousel height (the width doesn't matter)) which scales responsively as the page itself does. However, I want my slider to be of lighter weight/ greater simplicity.

Here is my code thus far:

(here is the head)

<head>
<!-- Flex Slider API JS -->
    <link rel="stylesheet" href="flexslider.css" type="text/css">
    <script src=".6.2/jquery.min.js"></script>
    <script src="jquery.flexslider.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(window).load(function() {
        $('.flexslider').flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 360,
            itemMargin: 5,
            minItems: 2,
            maxItems: 4
        });
      });
    </script>
<!-- End of FlexsliderAPI JS -->
</head>

Here is the body:

<body>
    <!-- Placement of Flex Slider -->
    <div class="flex-container">
        <div class="flexslider">
          <ul class="slides">
            <li>
              <img src="../../local/images/slide1.JPG" />
            </li>
            <li>
              <img src="../../local/images/slide2.JPG"/>
            </li>
            <li>
              <img src="../../local/images/slide3.JPG" />
            </li>
            <li>
              <img src="../../local/images/slide 5.jpg" />
            </li>
          </ul>
        </div>
    </div>
    <!-- End placement of FlexSlider -->
</body>

And here is the CSS:

.flex-container {
width: 100%;
height: 300px;
}
background-color: red;
.flex-container ul {
margin: 0px;
padding: 0px;
}
.flex-container li {
list-style: outside none none;
display: inline;
}
.flexslider .slides img {
width: inherit;
max-height: inherit;
}

Thanks a ton for the help. - Cody

I'm trying to create a full width, fixed-height, carousel image-slider for the home page of a website that I'm working on.

That is, where the images are scaled to a fixed-height (matching the carousel height (the width doesn't matter)) which scales responsively as the page itself does. However, I want my slider to be of lighter weight/ greater simplicity.

Here is my code thus far:

(here is the head)

<head>
<!-- Flex Slider API JS -->
    <link rel="stylesheet" href="flexslider.css" type="text/css">
    <script src="https://ajax.googleapis./ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="jquery.flexslider.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(window).load(function() {
        $('.flexslider').flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 360,
            itemMargin: 5,
            minItems: 2,
            maxItems: 4
        });
      });
    </script>
<!-- End of FlexsliderAPI JS -->
</head>

Here is the body:

<body>
    <!-- Placement of Flex Slider -->
    <div class="flex-container">
        <div class="flexslider">
          <ul class="slides">
            <li>
              <img src="../../local/images/slide1.JPG" />
            </li>
            <li>
              <img src="../../local/images/slide2.JPG"/>
            </li>
            <li>
              <img src="../../local/images/slide3.JPG" />
            </li>
            <li>
              <img src="../../local/images/slide 5.jpg" />
            </li>
          </ul>
        </div>
    </div>
    <!-- End placement of FlexSlider -->
</body>

And here is the CSS:

.flex-container {
width: 100%;
height: 300px;
}
background-color: red;
.flex-container ul {
margin: 0px;
padding: 0px;
}
.flex-container li {
list-style: outside none none;
display: inline;
}
.flexslider .slides img {
width: inherit;
max-height: inherit;
}

Thanks a ton for the help. - Cody

  • javascript
  • jquery
  • html
  • css
  • twitter-bootstrap
Share Improve this question edited Mar 28, 2017 at 4:25 CodyEakins asked Apr 25, 2015 at 17:47 CodyEakinsCodyEakins 7521 gold badge7 silver badges17 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 3

not snapping to height bounds

I don't see anything in flexslider that does anything with the height. Make sure all the elements are the same height, either by creating similarly sized thumbnails or enforcing a height with CSS. You might need to remove the itemWidth configuration to avoid stretching.

not displaying navigation

Your HTML is missing the navigation elements. I think you need to configure it; pass the navigation options:

controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next",

The configuration offercard uses is:

slideshowSpeed:7000,
animation:'slide',
controlNav:true,
directionNav:true,
pauseOnHover:true,
direction:'horizontal',
reverse:false,
animationSpeed:2000,
prevText:"&lt; PREV",
nextText:"NEXT &gt;",
easing:"linear",
slideshow:true,
itemWidth:800,
minItems:1,
itemMargin:0

本文标签：

版权声明：本文标题：javascript - Using flexslider to create a responsive, full width, fixed-height, carousel image-slider - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745563364a2663609.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。