رفتن به مطلب

سوال درمورد اسلایدر


پست های پیشنهاد شده

سلام دوستان

من یه اسلایدر دارم در سایتم که عکسش رو میذارم:

1451578890_aaaa-Copy-Copy-Copy.jpg.5e6a52e6e980ec57539c0562141b7f65.jpg

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

من اگه بخوام بجای اون اسکرول بار، یه چنین دکمه‌ای داشته باشم برای رفتن به عکس بعدی:

1871169955_aaaa-Copy-Copy-Copy.jpg.629f85b8bb41172ce2d77d1272e3e6d3.jpg

با توضیح این که این عکس رو الان با فتوشاپ ساختم که منظورم رو برسونم،

باید چکار کنم؟

 

کذهای css اسلایدر اینه:

.right-slider-books {
	display: flex;
	height: 100%;
	width: auto;
	margin: 2px 2px 2px 2px;
	overflow-x: auto;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.slider-books{
	width: 100%;
	height: 100%;
	flex-shrink: 0;
	margin: 1px 0px 2px 5px;
}

ممنون میشم راهنمایی کنید

لینک به ارسال
در 19 ساعت قبل، kamaalix گفته است :

سلام

اسلایدر رو خودتون نوشتید یا از افزونه استفاده می‌کنید؟

سلام قربان

خیر افزونه نیست. از کد استفاده میکنم. css + html

بدون جاوااسکریپت

لینک به ارسال
در در ۱۴۰۰/۱۰/۱۳ در 13:17، b.soshiant گفته است :

سلام دوستان

من یه اسلایدر دارم در سایتم که عکسش رو میذارم:

1451578890_aaaa-Copy-Copy-Copy.jpg.5e6a52e6e980ec57539c0562141b7f65.jpg

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

من اگه بخوام بجای اون اسکرول بار، یه چنین دکمه‌ای داشته باشم برای رفتن به عکس بعدی:

1871169955_aaaa-Copy-Copy-Copy.jpg.629f85b8bb41172ce2d77d1272e3e6d3.jpg

با توضیح این که این عکس رو الان با فتوشاپ ساختم که منظورم رو برسونم،

باید چکار کنم؟

 

کذهای css اسلایدر اینه:


.right-slider-books {
	display: flex;
	height: 100%;
	width: auto;
	margin: 2px 2px 2px 2px;
	overflow-x: auto;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.slider-books{
	width: 100%;
	height: 100%;
	flex-shrink: 0;
	margin: 1px 0px 2px 5px;
}

ممنون میشم راهنمایی کنید

سلام

وقت بخیر

نوشتن چنین چیزی بدون جاوااسکریپت ممکن نیست.

اگه با جاوااسکریپ آشنایی داشته باشید میتونید این چنین اسلایدری رو به راحتی بسازید.

از کتابخونه Jquery هم میتونید برای ساخت چنین اسلایدری استفاده کنید.

میتونید از طریق HTML  و CSS دکمه‌هایی برای جلو و عقب بردن اسلایدر بسازید و از طریق جاوااسکریپ روی اونها رویداد onclick تنظیم کنید و در اون اعلام کنید که بعد از هر بار کلیک، اسلایدر چه مقدار و به چه سمت حرکت کنه. (حرکت اسلایدر رو میتونید از طریق CSS و تابع transform تنظیم کنید).

البته به همین سادگی هم نیست، اما وقتی شروع به ساخت اسلایدر کنید (در صورتی که با جاواسکریپت آشنا باشید) با سختی‌ها و مشکلاتش مواجه میشید و حلش میکنید.

البته من کتابخونه‌ای مختص به خودم دارم که کارتونو راه میندازه اما نحوه کار باهاش مفصله. اگر بخواید میتونم این کتابخونه رو بفرستم و مختصر نحوه ساخت اسلایدر رو باهاش براتون توضیح بدم.

لینک به ارسال
در 38 دقیقه قبل، b.soshiant گفته است :

سلام قربان

خیر افزونه نیست. از کد استفاده میکنم. css + html

بدون جاوااسکریپت

پس از این لینک استفاده کنید و اسلایدر مورد نظرتون رو خودتون بنویسید.

https://www.w3schools.com/w3css/w3css_slideshow.asp

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...