اجرا نشدن متد height

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

با سلام و وقت بخیر من کد رو کامل نوشتم و طبق ویدئو پیش رفتم اما قسمت متد height اجرا نمیشه باید به li هم height بدم تا اجرا بشه

#slider{
position: relative;
 overflow: hidden;
 margin: 20px auto;
 border-radius: 4px;
}
#slider ul {
position: relative;
 height: 800px;
}
#slider ul li {
position: relative;
 display: block;
 float: right;
 width: 800px;
}
let j = jQuery. noConflict();
j(document).ready(function (){
let slideCount = j('#slider ul li').length;
 let slideWith = j('#slider ul li').width();
 let slideHeight = j('#slider ul li').height();
 let slideUlWidth = slideCount * slideWith ;
 console.log(slideUlWidth);
 j('#slider').css({width:slideWith, height:slideHeight});
});

سلام،

کدتون رو بصورت کامل قرار بدید + html

بهتره داخل codepen.io یا jsfiddle.net بگذارید.

محسن موحد ۲۸ مرداد ۱۴۰۲، ۲۰:۴۷

DOCTYPE html>

<head>

<title>Documenttitle>

head>

<body>

<h1>پروژه شماره 2h1>

<ul>

ul>

div>

body>

html>

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

body {

background-color: rgba(128, 128, 128, 0.566);

}

a {

text-decoration: none;

}

ul,

li {

list-style: none;

}

h1 {

text-align: center;

}

#slider {

position: relative;

margin: 10px auto;

border-radius: 10px;

overflow: hidden;

}

#slider ul {

position: relative;

height: 800px;

}

#slider ul li {

position: relative;

display: block;

width: 800px;

float: left;

height: 490px;

}

a.prev,

a.next {

position: absolute;

display: block;

width: auto;

height: auto;

top: 45%;

font-size: 30px;

color: #fff;

z-index: 999;

opacity: 0.6;

transition: all 0.5s ease;

}

a.prev {

left: 0;

}

a.prev:hover,

a.next:hover {

color: lightyellow;

opacity: 1.2;

}

let j = jQuery.noConflict();

j(document).ready(function () {

let slideCount = j("#slider ul li").length;

let slideWidth = j("#slider ul li").width();

let slideHeight = j("#slider ul li").height();

let sliderCal = slideCount * slideWidth;

console.log(sliderCal);

j("#slider").css({ width: slideWidth, height: slideHeight });

function moveRight() {

j("#slider ul li:last-child").prependTo("#slider ul");

}

j("a.next").click(function () {

moveRight();

});

عابد محمدی ۳۱ مرداد ۱۴۰۲، ۱۸:۱۱

با سلام

لطفا به جواب منتور قبلی جناب موحد دقت کنید که روش ضمیمه کردن را به چه شکل مطرح کرده اند

بهنام مرادی ۰۳ شهریور ۱۴۰۲، ۰۶:۱۷

بردمش روی codepen میتونید تغییرات رو ببینید:

https://codepen.io/Mohsen-Movahed/pen/KKbdWqK

تغییراتی که در html انجام دادم روی کدهاتون: (فقط href دو تگ a)

0216-Screenshot 2023-08-25 121313.png

تغییرات در کدهای css:

a.prev, a.next {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  top: 45%;
  font-size: 30px;
  color: #fff;
  z-index: 999;
  opacity: 0.6;
  transition: all 0.5s ease;
}
a.prev {
  left: 10px;
}
a.next {
  right: 10px;
}

کدهای جی کوئری: (اسلایدر + افزودن انیمیشن)

let j = jQuery.noConflict();
j(document).ready(function () {
  let slideCount = j("#slider ul li").length;
  let slideWidth = j("#slider ul li").width();
  let slideHeight = j("#slider ul li").height();
  let sliderCal = slideCount * slideWidth;
  j("#slider ul").css('width', sliderCal);
  j("#slider").css({ width: slideWidth, height: slideHeight });
  function moveRight() {
    j("#slider ul li:last-child").animate({
      opacity: 0
    }, 200, function() {
      j(this).prependTo("#slider ul").css('opacity', 1);
    });
  }
  function moveLeft() {
    j("#slider ul li:first-child").animate({
      opacity: 0
    }, 200, function() {
      j(this).appendTo("#slider ul").css('opacity', 1);
    });
  }
  j("a.next").click(function () {
    moveLeft();
  });
  j("a.prev").click(function () {
    moveRight();
  });
});

نکته: البته کد جی کوئری که شما نوشتید هم بدرستی کار میکنه و مشکلی نداره، میتونید داخل codepen بذارید و اجراشو ببینید.

محسن موحد ۰۳ شهریور ۱۴۰۲، ۰۸:۳۷