产品页的内饰区域跟外观区域的显示差不多,内容结构是一样的,同样使用旋转木马的形式去展示这块内容,不太一样的地方是,内饰这块我只打算每次显示一张图片 ..
回到 product.html ... 整体地复制一下之前我们添加的外观内容这块代码,然后去修改里面的具体的内容就行了,内容的组织结构是完成一样的 ..
先修改一下这个包装上的 id ... 把 exterior-design 换成 interior-design
先修改一下里面的文字项目 ... 子标题换成 内饰 ...
在这个内容文件里,你可以找到内饰的区域上的具体的文字内容 ... 浏览到内饰区域 .. 复制一下其中的一个项目的标题 ..
把它粘贴到这里 ... 再复制一下描述内容 ... 替换一下这里的描述 ...
然后用同样的方法,再处理一下另外这两个文字项目 ..
完成以后再修改一下图像项目 ... 替换一下每个图像项目的图像的地址,这些地址在这个内容文字里你也可以找到 ...
下面我们再去配置一下这块区域的旋转木马功能 ... 在 main.js 里面 ..
内饰的旋转木马配置,跟外观区域的旋转木马的配置基本上是一样的,所以我们可以直接复制之前添加的这些配置 ..
修改一下元素的名字 ... 把 exterior-design 换成 interior-design ..
内饰的图像旋转木马每次只显示一个项目,把 slidesToShow 的值设置成 1 ..
完成以后,再到浏览器上预览一下 ...