鼠标滚轮方向不起作用

Question

在我的html中我已经集成了卡片并且由鼠标滚轮控制问题是当我滚动鼠标时它显示下一张卡片是好的但是当我向上滚动时它并没有改变为以前的卡。 向上滚动的预期结果1-> 5-> 4-> 3-> 2-> 1 向上滚动的现实1-> 2-> 3-> 4-> 5-> 6

＆＃13;

＆＃13;

flag = 1;
$("body").mousewheel(function() {

  if (flag == 0) {
    $("#side1").css("z-index", "999");
    $("#side2").css("z-index", "9");
    $("#side3").css("z-index", "9");
    $("#side4").css("z-index", "9");
    $("#side5").css("z-index", "9");
    $("#side1").css("transform", "translateX(0px) scale(1.5)");
    $("#side2").css("transform", "translateX(-100px) scale(1)");
    $("#side3").css("transform", "translateX(100px)");
    $("#side4").css("transform", "translateX(100px)");
    $("#side5").css("transform", "translateX(100px)");
    flag = 1;


  } else if (flag == 1) {
    $("#side2").css("z-index", "999");
    $("#side1").css("z-index", "9");
    $("#side4").css("z-index", "9");
    $("#side5").css("z-index", "9");
    $("#side3").css("z-index", "9");

    $("#side2").css("transform", "translateX(0px) scale(1.5)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side4").css("transform", "translateX(100px)");
    $("#side5").css("transform", "translateX(100px)");
    $("#side3").css("transform", "translateX(100px)");


    flag = 2;

  } else if (flag == 2) {

    $("#side3").css("z-index", "999");
    $("#side4").css("z-index", "9");
    $("#side5").css("z-index", "9");
    $("#side1").css("z-index", "9");
    $("#side2").css("z-index", "9");
    $("#side3").css("transform", "translateX(0px) scale(1.5)");
    $("#side4").css("transform", "translateX(-100px) scale(1)");
    $("#side5").css("transform", "translateX(-100px) scale(1)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side2").css("transform", "translateX(100px)");


    flag = 3;

  } else if (flag == 3) {
    $("#side4").css("z-index", "999");
    $("#side5").css("z-index", "9");
    $("#side3").css("z-index", "9");
    $("#side1").css("z-index", "9");
    $("#side2").css("z-index", "9");
    $("#side4").css("transform", "translateX(0px) scale(1.5)");
    $("#side5").css("transform", "translateX(-100px) scale(1)");
    $("#side3").css("transform", "translateX(-100px) scale(1)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side2").css("transform", "translateX(100px)");

    flag = 4;
  } else if (flag == 4) {
    $("#side5").css("z-index", "999");
    $("#side4").css("z-index", "9");
    $("#side3").css("z-index", "9");
    $("#side1").css("z-index", "9");
    $("#side2").css("z-index", "9");
    $("#side5").css("transform", "translateX(0px) scale(1.5)");
    $("#side4").css("transform", "translateX(-100px) scale(1)");
    $("#side3").css("transform", "translateX(-100px) scale(1)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side2").css("transform", "translateX(100px)");

    flag = 0;
  }

});

＆＃13;

#main {
  position: absolute;
  margin-top: 10%;
  left: 35%;
}

#side1 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(0px) scale(1.5);
  z-index: 99;
  border: 2px solid gray;
  transition: all .5s;
  background-color: #f3f3f3;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side2 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(-100px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side3 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(100px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side4 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(110px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side5 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(100px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#pre {
  height: 30px;
  width: 100px;
  border: 2px solid white;
  font-family: arial;
  font-size: 15px;
  color: black;
  text-align: center;
  line-height: 30px;
  position: absolute;
  margin-top: 15%;
  left: 10%;
}

#pre:hover {
  cursor: pointer;
}

#nex {
  height: 30px;
  width: 100px;
  border: 2px solid white;
  font-family: arial;
  font-size: 15px;
  color: black;
  text-align: center;
  line-height: 30px;
  position: absolute;
  margin-top: 15%;
  right: 10%;
}

#nex:hover {
  cursor: pointer;
}

#detail {
  padding-top: 10px;
}

.count {
  font-size: 28px;
  padding-left: 10px;
  padding-top: 6px;
  color: #94b4d7;
  transform: scale(1.4);
  font-weight: 400;
  font-family: 'Roboto';
}

.cardheading {
  margin-left: -10px;
  padding-top: 23px;
  font-size: 14px;
  color: #666666;
}

.words {
  font-size: 10px;
  margin-left: 2px;
  font-weight: 500;
  color: #616161;
}

.wordimg {
  margin-left: 22px;
}

.iconic {
  height: 80px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>

<div class="row">
  <div id="pre">
    PREVIOUS
  </div>
  <div id="main">
    <!---slide one-->
    <div id="side1">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">1.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading">We listen, while you tell us about</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Project</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Budget </span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Taste  </span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words"> Your Aspirations</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>
    <!---slide two-->
    <div id="side2">

      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">2.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading">You listen, when we give you</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Free Design Consultation</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Site Measurement</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Floor Plans</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Quotations</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>

    </div>
    <!---slide Three-->
    <div id="side3">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">3.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading text-center" style="margin-left: -120px;">We together</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Choose design teams</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Budget your project</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Plan a timeline</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>

    </div>
    <!---slide Four-->
    <div id="side4">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">4.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading" style="margin-left: 30px;">You relax while we</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Execute them</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle all the stress</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Co-ordinate labour teams</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle products</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>
    <!---slide Five-->
    <div id="side5">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">5.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading" style="margin-left: 50px;">You move in</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">All happy</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">With our technical help</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Lifelong  support</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>


  </div>
  <div id="nex">
    NEXT
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Fiddle

Answer 1

使用event.deltaY标识滚动方向。

e.g。

if (event.deltaY < 0)
    flag--;
  else
    flag++;

固定代码：

＆＃13;

＆＃13;

var flag = 1;
var delta = 0;

$("body").mousewheel(function() {
  delta += event.deltaY;

  if (Math.abs(delta) < 500)
    return;

  delta = 0;

  if (event.deltaY < 0)
    flag--;
  else
    flag++;

  if (flag < 1)
    flag = 5;
  else if (flag > 5)
    flag = 1;

  if (flag == 1) {
    $("#side1").css("z-index", "999");
    $("#side2").css("z-index", "9");
    $("#side3").css("z-index", "9");
    $("#side4").css("z-index", "9");
    $("#side5").css("z-index", "9");
    $("#side1").css("transform", "translateX(0px) scale(1.5)");
    $("#side2").css("transform", "translateX(-100px) scale(1)");
    $("#side3").css("transform", "translateX(100px)");
    $("#side4").css("transform", "translateX(100px)");
    $("#side5").css("transform", "translateX(100px)");

  } else if (flag == 2) {
    $("#side2").css("z-index", "999");
    $("#side1").css("z-index", "9");
    $("#side4").css("z-index", "9");
    $("#side5").css("z-index", "9");
    $("#side3").css("z-index", "9");

    $("#side2").css("transform", "translateX(0px) scale(1.5)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side4").css("transform", "translateX(100px)");
    $("#side5").css("transform", "translateX(100px)");
    $("#side3").css("transform", "translateX(100px)");

  } else if (flag == 3) {

    $("#side3").css("z-index", "999");
    $("#side4").css("z-index", "9");
    $("#side5").css("z-index", "9");
    $("#side1").css("z-index", "9");
    $("#side2").css("z-index", "9");
    $("#side3").css("transform", "translateX(0px) scale(1.5)");
    $("#side4").css("transform", "translateX(-100px) scale(1)");
    $("#side5").css("transform", "translateX(-100px) scale(1)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side2").css("transform", "translateX(100px)");

  } else if (flag == 4) {
    $("#side4").css("z-index", "999");
    $("#side5").css("z-index", "9");
    $("#side3").css("z-index", "9");
    $("#side1").css("z-index", "9");
    $("#side2").css("z-index", "9");
    $("#side4").css("transform", "translateX(0px) scale(1.5)");
    $("#side5").css("transform", "translateX(-100px) scale(1)");
    $("#side3").css("transform", "translateX(-100px) scale(1)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side2").css("transform", "translateX(100px)");

  } else if (flag == 5) {
    $("#side5").css("z-index", "999");
    $("#side4").css("z-index", "9");
    $("#side3").css("z-index", "9");
    $("#side1").css("z-index", "9");
    $("#side2").css("z-index", "9");
    $("#side5").css("transform", "translateX(0px) scale(1.5)");
    $("#side4").css("transform", "translateX(-100px) scale(1)");
    $("#side3").css("transform", "translateX(-100px) scale(1)");
    $("#side1").css("transform", "translateX(-100px) scale(1)");
    $("#side2").css("transform", "translateX(100px)");

  }

});

＆＃13;

#main {
  position: absolute;
  margin-top: 10%;
  left: 35%;
}

#side1 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(0px) scale(1.5);
  z-index: 99;
  border: 2px solid gray;
  transition: all .5s;
  background-color: #f3f3f3;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side2 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(-100px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side3 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(100px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side4 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(110px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#side5 {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translateX(100px);
  z-index: 9;
  border: 2px solid gray;
  transition: all .5s;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
}

#pre {
  height: 30px;
  width: 100px;
  border: 2px solid white;
  font-family: arial;
  font-size: 15px;
  color: black;
  text-align: center;
  line-height: 30px;
  position: absolute;
  margin-top: 15%;
  left: 10%;
}

#pre:hover {
  cursor: pointer;
}

#nex {
  height: 30px;
  width: 100px;
  border: 2px solid white;
  font-family: arial;
  font-size: 15px;
  color: black;
  text-align: center;
  line-height: 30px;
  position: absolute;
  margin-top: 15%;
  right: 10%;
}

#nex:hover {
  cursor: pointer;
}

#detail {
  padding-top: 10px;
}

.count {
  font-size: 28px;
  padding-left: 10px;
  padding-top: 6px;
  color: #94b4d7;
  transform: scale(1.4);
  font-weight: 400;
  font-family: 'Roboto';
}

.cardheading {
  margin-left: -10px;
  padding-top: 23px;
  font-size: 14px;
  color: #666666;
}

.words {
  font-size: 10px;
  margin-left: 2px;
  font-weight: 500;
  color: #616161;
}

.wordimg {
  margin-left: 22px;
}

.iconic {
  height: 80px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>

<div class="row">
  <div id="pre">
    PREVIOUS
  </div>
  <div id="main">
    <!---slide one-->
    <div id="side1">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">1.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading">We listen, while you tell us about</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Project</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Budget </span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Taste  </span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words"> Your Aspirations</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>
    <!---slide two-->
    <div id="side2">

      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">2.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading">You listen, when we give you</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Free Design Consultation</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Site Measurement</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Floor Plans</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Quotations</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>

    </div>
    <!---slide Three-->
    <div id="side3">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">3.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading text-center" style="margin-left: -120px;">We together</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Choose design teams</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Budget your project</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Plan a timeline</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>

    </div>
    <!---slide Four-->
    <div id="side4">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">4.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading" style="margin-left: 30px;">You relax while we</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Execute them</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle all the stress</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Co-ordinate labour teams</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle products</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>
    <!---slide Five-->
    <div id="side5">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">5.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading" style="margin-left: 50px;">You move in</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">All happy</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">With our technical help</span><br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Lifelong  support</span><br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>


  </div>
  <div id="nex">
    NEXT
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

更新：更简单的解决方案：

＆＃13;

＆＃13;

var delta = 0;
$("body").mousewheel(function() {
  delta += event.deltaY;

  if (Math.abs(delta) < 500)
    return;
    
  delta = 0;
  var $slide = $(".slide.active").removeClass("active");
  var $newSlide = event.deltaY < 0 ? $slide.prev() : $slide.next();
  if (!$newSlide.length) {
    $newSlide = event.deltaY < 0 ? $slide.siblings().last() : $slide.siblings().first();
  }
  $newSlide.css("transform", "").addClass("active");
  $newSlide.prevAll().css("transform", "translateX(-100px) scale(1)");
  $newSlide.nextAll().css("transform", "translateX(100px)");
});

＆＃13;

#main {
  position: absolute;
  margin-top: 10%;
  left: 35%;
}

.slide {
  height: 200px;
  width: 350px;
  position: absolute;
  border: 2px solid gray;
  transition: all .5s;
  background-color: #f3f3f3;
  border-radius: 0.035cm;
  background-color: rgb( 243, 243, 243);
  box-shadow: 0.023cm 0.043cm 0.1778cm 0.0762cm rgb( 0, 0, 0);
  z-index: 9;
}

.slide.active {
  z-index: 99;
  transform: translateX(0px) scale(1.5);
}

#pre {
  height: 30px;
  width: 100px;
  border: 2px solid white;
  font-family: arial;
  font-size: 15px;
  color: black;
  text-align: center;
  line-height: 30px;
  position: absolute;
  margin-top: 15%;
  left: 10%;
}

#pre:hover {
  cursor: pointer;
}

#nex {
  height: 30px;
  width: 100px;
  border: 2px solid white;
  font-family: arial;
  font-size: 15px;
  color: black;
  text-align: center;
  line-height: 30px;
  position: absolute;
  margin-top: 15%;
  right: 10%;
}

#nex:hover {
  cursor: pointer;
}

#detail {
  padding-top: 10px;
}

.count {
  font-size: 28px;
  padding-left: 10px;
  padding-top: 6px;
  color: #94b4d7;
  transform: scale(1.4);
  font-weight: 400;
  font-family: 'Roboto';
}

.cardheading {
  margin-left: -10px;
  padding-top: 23px;
  font-size: 14px;
  color: #666666;
}

.words {
  font-size: 10px;
  margin-left: 2px;
  font-weight: 500;
  color: #616161;
}

.wordimg {
  margin-left: 22px;
}

.iconic {
  height: 80px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>

<div class="row">
  <div id="pre">
    PREVIOUS
  </div>
  <div id="main">
    <!---slide one-->
    <div class="slide active">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">1.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading">We listen, while you tell us about</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Project</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Budget </span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Your Taste  </span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words"> Your Aspirations</span>
          <br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>
    <!---slide two-->
    <div class="slide">

      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">2.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading">You listen, when we give you</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Free Design Consultation</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Site Measurement</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Floor Plans</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Quotations</span>
          <br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>

    </div>
    <!---slide Three-->
    <div class="slide">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">3.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading text-center" style="margin-left: -120px;">We together</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Choose design teams</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Budget your project</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Plan a timeline</span>
          <br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>

    </div>
    <!---slide Four-->
    <div class="slide">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">4.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading" style="margin-left: 30px;">You relax while we</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Execute them</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle all the stress</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Co-ordinate labour teams</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Handle products</span>
          <br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>
    <!---slide Five-->
    <div class="slide">
      <div class="row" align="center">
        <div class="col-2 text-center">
          <h1 class="count">5.</h1>
        </div>
        <div class="col-10 text-left">
          <h2 class="cardheading" style="margin-left: 50px;">You move in</h2>
        </div>
      </div>
      <div class="row" id="detail">
        <div class="col-1"></div>
        <div class="col-6">
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">All happy</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">With our technical help</span>
          <br/>
          <img class="wordimg" src="img/check%20%2016_16.png"><span class="words">Lifelong  support</span>
          <br/>
        </div>
        <div class="col-5">
          <img class="iconic" src="img/slideoneimg.png">
        </div>
      </div>
    </div>


  </div>
  <div id="nex">
    NEXT
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;