时间戳

首页 > 解决方案 > 用卡片创建幻灯片

javascript - 用卡片创建幻灯片

问题描述

我创建了一个食谱卡 div，我希望它变成幻灯片，其他三个div 使用光滑的轮播。http://kenwheeler.github.io/slick/。我希望在按下左键或右键时激活幻灯片。我已经创建了主 DIV，但我不确定如何继续。这是我到目前为止的工作：

body {
  margin: 0;
  padding: 0;
  font-family: 'Oswald', sans-serif;
}



.icon-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content:space-between;
  background-color: #FC5558;
  padding: 10px;
padding-left: 10px;
}

.icon-bar i {
  color: #fff;
}




.nav ul {
  list-style: none;
  background-color: #0F211E;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
  text-transform: uppercase;
}

.hero-image {
  background-image: url("1.jpg");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
  /* Options 2 - Float
  .nav li {
    float: left;
  }
  .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
  }
  .nav {
    background-color: #444;
  }
  */
}

section.hero {
  height: 75%;
  position: relative;
}

.hero-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.bgimg {
  /* The image used */
  background-image: url("bg.jpg");
  /* Set a specific height */
  height: 100%;
  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.back .caption:before {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: scale(0, 1);
}

.back .caption:after {
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  transform: scale(1, 0);
}

.card.flipped .back .caption:before,
.card.flipped .back .caption:after {
  opacity: .9;
  transform: scale(1);
}

.back dl {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 300;
  bottom: 40px;
  left: 40px;
  position: absolute;
  opacity: 0;
  transition: opacity .35s, transform .35s;
  transition-delay: .85s;
  transform: translate3d(-40px, 0, 0);
}

.card.flipped .back dl {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

dl dt {
  float: left;
  width: 60px;
  overflow: hidden;
  clear: left;
  text-align: right;
  font-weight: 700;
}

dl dd {
  margin-left: 80px;
  text-align: left;
}

dl dd:before,
dl dd:after {
  display: table;
  content: " ";
}

dl dd:after {
  clear: both;
}

.front:hover p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

figure a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 450px) {
  .container {
    left: 50%;
    margin-left: -225px;
  }
}

body {
  background-color: #0F211E;
}

.recipe-card {
  border-top: 15px solid lightblue;
  background: #fff;
  margin: 0 auto;
  width: 90%;
  max-width: 600px;
	max-height: 400px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.card-top {
  padding: 30px 15px;
  display: flex;
}

.card-top .right {
  padding-left: 20px;
}
<html>

<head>

  <title>Portfolio</title>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

  <link rel="stylesheet" href="style.css">
  </style>

</head>

<body class="news">


  <header>

    <div class="nav">
      <ul>
        <li class="two">
          <a href="#"> <span style="color:aqua;">About</span></a>
        </li>
        <li class="three"><a class="active" href="#"><span style="color: lightcoral">Projects</span></a></li>
        <li class="four"><a href="#"><span style="color: lightcoral">Skills</span></a></li>
      </ul>
    </div>
  </header>


  <section class="hero">
    <div class="bgimg">
    </div>


    <div class="hero-content">
      <div class="recipe-card">

        <aside>
          <div class="card-top">
            <div class="left">
              <img src="myAvatar.png" class="myavatar">
            </div>
            <div class="right">
              <h1>Hamza Wahbi</h1>
              <hr class="hrunder">
              <h5 style="color:#8B8B8B ">Web Developer</h5>
              <h1>Age:
                <font color="#8B8B8B">13</font>
              </h1>
              <h1>Email:
                <font color="#8B8B8B">fxgfnxngfx@gmail.com</font>
              </h1>
              <h1>Phone:
                <font color="#8B8B8B">0093836372</font>
              </h1>
            </div>

          </div>

        </aside>
        <div class="icon-bar">
          <i class="fab fa-twitter fa-3x"></i>
          <i class="fab fa-instagram fa-3x"></i>
          <i class="fab fa-dribbble fa-3x"></i>
          <i class="fab fa-facebook-f fa-3x"></i>
          <i class="fab fa-snapchat-ghost fa-3x"></i>
          <i class="fab fa-google-plus-g  fa-3x"></i>
          <i class="fab fa-youtube fa-3x"></i>
          <i class="fab fa-pinterest-p fa-3x"></i>
        </div>
      </div>

    </div>
    <!-- .hero-content -->

  </section>

  </div>






</html>

如果您需要更多信息，请告诉我，因为我已经为这个项目苦苦挣扎了很长时间，并尝试了不同的方法来实现这一目标，但我失败了。

标签： javascripthtmlcss

解决方案

推荐阅读