آموزش ساخت اسلایدر با HTML و CSS (عکس

آخرین بروزرسانی در تاریخ : 4 خرداد 1403

باید لاگین کنید!

ساخت اسلایدر عکس در html یا به عبارتی ساخت اسلایدر در html و css برای افرادی که تازه یادگیری HTML و CSS را شروع کرده‌اند می‌تواند کمی چالش برانگیز باشد. اما امروز در این آموزش ویدیویی از سری آموزش HTML و CSS ساخت اسلایدر با html و css را یاد می‌گیرید. این انیمیشن اسلایدر به طور کامل بر اساس HTML CSS است. همچنین این پروژه به صورت کامل ریسپانسیو بوده و برای استفاده در موبایل و دستکتاپ نیز بهینه شده است.

اگر وب سایت وردپرسی دارید و می‌خواهید اسلایدرهای بسیار جذاب طراحی کنید، پیشنهاد می‌کنیم حتما از آموزش روولوشن اسلایدر رایگان وبکیما که به صورت ویدیویی منتشر شده دیدن کنید!

راهنمای مطالعه:

ساخت اسلایدر در html

اسلایدرهای بلاگ یا تصویر (همچنین به عنوان چرخ فلک تصویر یا نمایش اسلاید نیز شناخته می شود) می تواند راهی آسان برای نمایش چندین تصویر، ویدیو یا گرافیک در وب سایت شما باشد. ایده نمایش یک تصویر بزرگ، زیبا و پر زرق و برق می تواند بسیار جذاب باشد. تصاویر جذاب می توانند بازدیدکنندگان جدیدی را وارد سایت شما کنند و فوراً توجه آنها را به خود جلب کنند.

در این پروژه (کارت بلاگ اسلایدر متحرک)، ابتدا در صفحه وب، یک پس زمینه گرادیان با جعبه ظرف سفید وجود دارد. و این کادر یک تصویر در سمت چپ و تعدادی متن، یک دکمه و کنترل های اسلایدری در سمت پایین وجود دارد. از این دکمه ها برای اسلاید کردن کارت های پیش نمایش استفاده می شود. سه کارت مختلف با یک تصویر متفاوت وجود دارد و هنگامی که روی دکمه کلیک می کنید، هر کارت به آرامی اسلاید میشود و کارت دیگری را نشان می دهد.

ساخت اسلایدر با html و css

شما می توانید از این مینی پروژه در وب سایت ها، پروژه ها و صفحات HTML خود استفاده کنید. امروزه هر وب سایتی دارای کارت یا نمایش اسلاید تصویری برای نمایش محصولات، چندین تصویر، ویدیو یا گرافیک در وب سایت خود است. اگر این پروژه (کارت بلاگ اسلایدر متحرک) را دوست دارید و می خواهید کدهای منبع را دریافت کنید. به راحتی می توانید کدهای منبع این پروژه را از زیر برای خود کپی کنید.

سورس کد اسلایدر html

در زیر می‌توانید کدهای Html مورد نیاز این پروژه را مشاهده کنید، همان طور که در ویدیو مشاهده کردید برای استفاده از این کدها باید ابتدا یک پوشه ساخته و آن را در ادیتور VS CODE باز کنید، سپس یک فایل با نام index.html ساخته و کدهای زیر را در آن کپی و پیس کنید.

کد اسلایدر در html

دقت کنید که اگر می‌خواهید کدنویسی HTML و CSS را یاد بگیرید کدها را همراه با ویدیوی آموزشی خودتان تایپ کنید، فقط در این صورت است که مطالب این آموزش را به صورت کامل درک خواهید کرد.

<!DOCTYPE html>
<!-- Created By Navid Dev -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Navid Dev - Slider Blog Card</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="blog-card">
      <input type="radio" name="select" id="tap-1" checked />
      <input type="radio" name="select" id="tap-2" />
      <input type="radio" name="select" id="tap-3" />
      <input type="checkbox" id="imgTap" />
      <div class="sliders">
        <label for="tap-1" class="tap tap-1"></label>
        <label for="tap-2" class="tap tap-2"></label>
        <label for="tap-3" class="tap tap-3"></label>
      </div>
      <!-- Slide 1 -->
      <div class="inner-part">
        <label for="imgTap" class="img">
          <img
            src="https://images.unsplash.com/photo-1642427749670-f20e2e76ed8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
            alt=""
            class="img-1"
          />
        </label>
        <div class="content content-1">
          <span>28 May 2022</span>
          <h3 class="title">Lorem ipsum dolor</h3>
<p class="text">1Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, labore cupiditate! </p>
<button>Read More</button>
        </div>

        <!-- Slide 2 -->
      <div class="inner-part">
        <label for="imgTap" class="img">
          <img
            src="https://images.unsplash.com/photo-1635492491273-455af7728453?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=960&q=80"
            alt=""
            class="img-2"
          />
        </label>
        <div class="content content-2">
          <span>28 Jul 2022</span>
          <h3 class="title">Lorem ipsum dolor</h3>
<p class="text">2Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, labore cupiditate!</p>
<button>Read More</button>
        </div>
        <!-- Slide 3 -->
      <div class="inner-part">
        <label for="imgTap" class="img">
          <img
            src="https://images.unsplash.com/photo-1621360841013-c7683c659ec6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80"
            alt=""
            class="img-3"
          />
        </label>
        <div class="content content-3">
          <span>28 Jul 2022</span>
          <h3 class="title">Lorem ipsum dolor</h3>
<p class="text">3Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, labore cupiditate! </p>
<button>Read More</button>
        </div>
      </div>
    </div>
  </body>
</html>

کد اسلایدر در CSS

در ادامه در همان پروژه خود یک فایل style.css ساخته و کدهای زیر را درون آن تایپ کنید، یادتان باشد که برای استفاده از فونت های رایگان انگلیسی می‌توانید از سایت عالی گوگل فونت استفاده کنید.

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: 'Fira Sans', sans-serif;
  background: linear-gradient(147deg, #f6b323 0%, #f23b26 74%);
}
img {
  max-width: 100%;
}
.blog-card {
  position: absolute;
  height: 370px;
  width: 95%;
  max-width: 850px;
  margin: auto;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 10px 50px rgba(252, 56, 56, 0.3);
}
.inner-part {
  position: absolute;
  display: flex;
  height: 360px;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
}
#imgTap:checked ~ .inner-part {
  padding: 0;
  transition: 0.1s ease-in;
}
.inner-part .img {
  height: 260px;
  width: 260px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 20px;
}

#imgTap:checked ~ .inner-part .img {
  height: 370px;
  width: 850px;
  z-index: 99;
  margin-top: 10px;
  transition: 0.3s 0.2s ease-in;
}
.img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  opacity: 0;
  transition: 0.6s;
}
#tap-1:checked ~ .inner-part .img-1,
#tap-2:checked ~ .inner-part .img-2,
#tap-3:checked ~ .inner-part .img-3 {
  opacity: 1;
  transition-delay: 0.2s;
}
.content {
  padding: 0 20px 0 35px;
  width: 530px;
  margin-left: 50px;
  opacity: 0;
  transition: 0.6s;
}

#tap-1:checked ~ .inner-part .content-1,
#tap-2:checked ~ .inner-part .content-2,
#tap-3:checked ~ .inner-part .content-3 {
  opacity: 1;
  margin-left: 0;
  z-index: 100;
  transition-delay: 0.3s;
}
.content span {
  display: block;
  color: #7b7992;
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: 500;
}
.content .title {
  font-size: 30px;
  font-weight: 700;
  color: #0d0925;
  margin-bottom: 20px;
}
.content .text {
  color: #4e4a67;
  font-size: 19px;
  margin-bottom: 30px;
  line-height: 1.5em;
  text-align: justify;
}
.content button {
  display: inline-flex;
  padding: 15px 20px;
  border: none;
  font-size: 16px;
  text-transform: uppercase;
  color: #fff0e6;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
  cursor: pointer;
  border-radius: 50px;
  border: 1px solid #fd3838;
}
.sliders {
  position: absolute;
  bottom: 25px;
  left: 65%;
  transform: translateX(-50%);
  z-index: 12;
}
#imgTap:checked ~ .sliders {
  display: none;
}
.sliders .tap {
  position: relative;
  height: 10px;
  width: 50px;
  background: #d9d9d9;
  border-radius: 5px;
  display: inline-flex;
  margin: 0 3px;
  cursor: pointer;
}
.sliders .tap:hover {
  background: #ccc;
}
.sliders .tap::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: -100%;
  background: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
  border-radius: 10px;
  transform: scaleX(0);
  transition: transform 0.6s;
  transform-origin: left;
}
input {
  display: none;
}
#tap-1:checked ~ .sliders .tap-1::before,
#tap-2:checked ~ .sliders .tap-2::before,
#tap-3:checked ~ .sliders .tap-3::before {
  transform: scaleX(1);
  width: 100%;
}
#imgTap:checked ~ .inner-part .content {
  display: none;
}
/* Responsive */
@media screen and (max-width: 50rem) {
  .inner-part {
    flex-direction: column;
  }
  .blog-card {
    height: 560px;
  }
  .sliders {
    left: 50%;
  }
  .content {
    margin-left: 0;
    width: auto;
    margin-top: 1rem;
  }
  .text {
    text-align: left !important;
  }
  #imgTap:checked ~ .inner-part .img {
    height: 560px;
    width: 100%;
    top: 95px;
    position: relative;
  }
}

نحوه استفاده از سورس کد اسلایدر html

دقت کنید که نحوه استفاده از کدها به صورت کامل در ویدیوی آموزشی آموزش داده شده است، پس لطفا حتما ابتدا ویدیو را با دقت مشاهده کنید سپس از کدها در پروژه های خود استفاده کنید.

جمع بندی

در انتها امیدواریم که آموزش طراحی اسلایدر کارت وبلاگ متحرک با HTML و CSS برای شما عزیزان مفید و کاربردی بوده باشد، اگر سوالی در رابطه با این آموزش دارید، در بخش کامنت‌ها با ما در ارتباط باشید.

4/5 - (4 امتیاز)

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنیدورود یا ثبت نام

Hedieh میگوید:
سلام وقتتون بخیر من پروژه ام طوری هستش که صفحه ی ایندکس من php هستش و من وقتی کدارو داخلش قرار میدم برای من نمایش نمیده ولی داخل سند html امتحان کردم اوکیه
کاری هست که من بکنم تا داخل php هم کد ها کار کنه؟

در
- پشتیبانی میگوید:
  سلام، بله باید تگ PHP را ببندید سپس این کدها را داخل صفحه خود قرار دهید، سپس مجددا تک PHP را باز کنید. این از اولین مواردی هست که در کار کردن با زبان PHP باید یاد بگیرید.
  
  در
aa.mohammad00 میگوید:
سلام استاد چجوری میشه بهش زمان داد؟

در
- پشتیبانی میگوید:
  درود، اگر بخواهید زمان را اضافه کنید باید توسط کدهای جاوا اسکریپت این کار را انجام دهید.
  
  در

آموزش طراحی فرم لاگین با HTML و CSS